# Open Components

## Documentation Sets

- [Open Components](https://opencomponents.dev/llms-full.txt)

## MCP Server

The Open Components MCP server, over streamable HTTP: the contracts, every rule and the docs, a section at a time, for agents to build and review components with.

- [Open Components MCP server](https://mcp.opencomponents.dev/mcp): Connect an MCP client to this URL, with no authentication
- [MCP Server](https://opencomponents.dev/raw/docs/getting-started/mcp-server.md): How to connect it to Claude Code, Cursor, VS Code and other clients, and what it offers

## Agent Plugin

The Open Components agent plugin, for clients that support Agent Plugins: skills that build and review components rule by rule, and the MCP server they read the standard from.

- [Agent Plugin](https://opencomponents.dev/raw/docs/getting-started/agent-plugin.md): How to install it in VS Code, GitHub Copilot, Cursor, Codex, Claude Code and other clients, and what it offers
- [Open Components agent plugin](https://github.com/uxfront-com/open-components/tree/main/plugins/open-components): The plugin itself: its manifest, its MCP configuration and its skills

## Contracts

Every requirement for a component or convention, rules included, in one YAML file.

- [Design Tokens](https://opencomponents.dev/raw/docs/foundations/design-tokens.yaml): The Design Tokens contract, with every rule from its checklist
- [Radio Group](https://opencomponents.dev/raw/docs/components/radio-group.yaml): The Radio Group contract, with every rule from its checklist
- [Button](https://opencomponents.dev/raw/docs/components/button.yaml): The Button contract, with every rule from its checklist
- [Card](https://opencomponents.dev/raw/docs/components/card.yaml): The Card contract, with every rule from its checklist
- [Checkbox Group](https://opencomponents.dev/raw/docs/components/checkbox-group.yaml): The Checkbox Group contract, with every rule from its checklist
- [Checkbox](https://opencomponents.dev/raw/docs/components/checkbox.yaml): The Checkbox contract, with every rule from its checklist
- [Dialog](https://opencomponents.dev/raw/docs/components/dialog.yaml): The Dialog contract, with every rule from its checklist
- [Input](https://opencomponents.dev/raw/docs/components/input.yaml): The Input contract, with every rule from its checklist
- [Popover](https://opencomponents.dev/raw/docs/components/popover.yaml): The Popover contract, with every rule from its checklist
- [Spinner](https://opencomponents.dev/raw/docs/components/spinner.yaml): The Spinner contract, with every rule from its checklist
- [Switch](https://opencomponents.dev/raw/docs/components/switch.yaml): The Switch contract, with every rule from its checklist
- [Textarea](https://opencomponents.dev/raw/docs/components/textarea.yaml): The Textarea contract, with every rule from its checklist
- [Tooltip](https://opencomponents.dev/raw/docs/components/tooltip.yaml): The Tooltip contract, with every rule from its checklist
- [Contract schema](https://opencomponents.dev/schemas/contract.json): The JSON Schema every contract follows, for validating them, and contracts of your own

## Docs

- [Introduction](https://opencomponents.dev/raw/docs/getting-started/introduction.md): Open Components is the standard for perfect UI components, with a perfect user experience, developer experience and agentic experience.
- [Roadmap](https://opencomponents.dev/raw/docs/getting-started/roadmap.md): The components we're bringing to the standard, in the order we plan to ship them, and what goes into every page.
- [MCP Server](https://opencomponents.dev/raw/docs/getting-started/mcp-server.md): Connect your agents to the standard, so they can read the contracts, every rule and the docs a section at a time as they build and review components.
- [Agent Plugin](https://opencomponents.dev/raw/docs/getting-started/agent-plugin.md): Install the standard in your agent as one plugin, with skills that build and review components rule by rule, and our MCP server.
- [Design Tokens](https://opencomponents.dev/raw/docs/foundations/design-tokens.md): How to name the CSS variables behind your components, so that people, tools and agents all read them the same way.
- [Radio Group](https://opencomponents.dev/raw/docs/components/radio-group.md): How to build a radio group that asks one clear question, lets people pick one answer with a pointer or the arrow keys, says what's wrong when they skip it, and that agents can check.
- [Button](https://opencomponents.dev/raw/docs/components/button.md): How to build a button that looks right, works for everyone, feels familiar to every developer and can be checked by your agents.
- [Card](https://opencomponents.dev/raw/docs/components/card.md): How to build a card that groups what people need to know about one thing, that keyboard and screen reader users can move through, and that agents can check.
- [Checkbox](https://opencomponents.dev/raw/docs/components/checkbox.md): How to build a checkbox that people can check with a click on its label, that says what it means and when it's mixed, that forms send the way they expect, and that agents can check.
- [Checkbox Group](https://opencomponents.dev/raw/docs/components/checkbox-group.md): How to build a group of checkboxes that people can pick any number of options from, that's named by its question, that says when they need to pick one, and that agents can check.
- [Dialog](https://opencomponents.dev/raw/docs/components/dialog.md): How to build a modal dialog that takes focus and gives it back, that everyone can close, that developers control and that agents can check.
- [Input](https://opencomponents.dev/raw/docs/components/input.md): How to build a text input that people can label, fill in and fix, that works with every keyboard, autofill and password manager, and that agents can check.
- [Popover](https://opencomponents.dev/raw/docs/components/popover.md): How to build a popover that shows more next to what opened it, leaves the rest of the page working, opens and closes the way people expect and can be checked by your agents.
- [Spinner](https://opencomponents.dev/raw/docs/components/spinner.md): How to build a spinner that shows something is busy, without getting in the way of screen readers, reduced motion or the layout around it.
- [Switch](https://opencomponents.dev/raw/docs/components/switch.md): How to build a switch that turns a setting on or off right away, that everyone can see, label and flip, and that agents can check.
- [Textarea](https://opencomponents.dev/raw/docs/components/textarea.md): How to build a textarea that people can label, write in at length and fix, that grows or resizes without cutting anything off, and that agents can check.
- [Tooltip](https://opencomponents.dev/raw/docs/components/tooltip.md): How to build a tooltip that shows a short hint on hover and keyboard focus, that people can reach, read and dismiss, and that agents can check.

## Changelog

- [The agent plugin](https://opencomponents.dev/raw/changelog/agent-plugin.md): Install the standard in your agent as one plugin, with skills that build and review components rule by rule, and our MCP server.
- [The Button](https://opencomponents.dev/raw/changelog/button.md): Our first component page, on building a button that looks right, works for everyone, feels familiar to every developer and can be checked by your agents.
- [The Card](https://opencomponents.dev/raw/changelog/card.md): Our fourth component page, on a card that groups what people need to know about one thing, that keyboard and screen reader users can move through, and that agents can check.
- [The Checkbox](https://opencomponents.dev/raw/changelog/checkbox.md): Our fourth component page, on a checkbox that people can check with a click on its label, that says what it means and when it's mixed, that forms send the way they expect, and that agents can check.
- [The Checkbox Group](https://opencomponents.dev/raw/changelog/checkbox-group.md): A new component page, on a group of checkboxes that its question names, that people can pick any number of options from, with a select-all box that's never out of step, and that agents can check.
- [A schema for contracts](https://opencomponents.dev/raw/changelog/contract-schema.md): Every contract now follows a published JSON Schema, so you, your editor and your agents can validate one before relying on it.
- [Design Tokens and token paths](https://opencomponents.dev/raw/changelog/design-tokens.md): A new Foundations page on naming the CSS variables behind your components, so that people, tools and agents all read them the same way.
- [The Dialog](https://opencomponents.dev/raw/changelog/dialog.md): A new component page, on a modal dialog that takes focus and gives it back, that everyone can close, that developers control and that agents can check.
- [The Input](https://opencomponents.dev/raw/changelog/input.md): Our third component page, on a text input that people can label, fill in and fix, that works with every keyboard, autofill and password manager, and that agents can check.
- [The MCP server](https://opencomponents.dev/raw/changelog/mcp-server.md): Connect your agents to the standard over MCP, so they read the contracts, every rule and the docs a section at a time as they build and review components.
- [The Popover](https://opencomponents.dev/raw/changelog/popover.md): A new component page, on a popover that shows more next to what opened it, leaves the rest of the page working, opens and closes the way people expect and that agents can check.
- [The Radio Group](https://opencomponents.dev/raw/changelog/radio-group.md): A new component page, on a radio group that asks one clear question, lets people pick one answer with a pointer or the arrow keys, says what's wrong when they skip it, and that agents can check.
- [Where each rule comes from](https://opencomponents.dev/raw/changelog/rule-basis.md): Every rule now says where it comes from, so you can tell what WCAG asks for from where we go further, and the Button's keep-focus rule is one every button can meet.
- [The Spinner](https://opencomponents.dev/raw/changelog/spinner.md): Our second component page, on a spinner that shows something is busy without getting in the way of screen readers, reduced motion or the layout around it.
- [The Switch](https://opencomponents.dev/raw/changelog/switch.md): Our fourth component page, on a switch that turns a setting on or off right away, that everyone can see, label and flip, and that agents can check.
- [The Textarea](https://opencomponents.dev/raw/changelog/textarea.md): Our component page on a textarea that people can label, write in at length and fix, that grows or resizes without cutting anything off, and that agents can check.
- [The Tooltip](https://opencomponents.dev/raw/changelog/tooltip.md): Our fourth component page, on a tooltip that shows a short hint on hover and keyboard focus, that people can reach, read and dismiss, and that agents can check.