Roadmap
Open Components grows one component page at a time. Here's what we've shipped so far, and what we plan to ship next.
A component ships when its page is complete, with the same structure as every other:
- UI: its anatomy, variants, colours, sizes, states and tokens.
- UX, DX and AX: the three layers, one trait at a time.
- Checklist: every rule, with a stable ID, a level and a way to check it.
- Contract: the rules on their own, published as YAML for agents.
- Reference implementation: a component that meets every rule, along with its tests.
That takes a while, so we'd rather ship one complete page than several half-written ones. The order below can change as we go, and you can help shape it.
Shipped
| Component | What the page covers |
|---|---|
| Button | Actions, with every variant, colour, size and state |
Planned
The components are grouped by what they build on, so each group can reuse the rules of the ones before it.
Forms
Form controls share the Button's sizes, colours and states, and add the labels, hints, validation and controlled values that every form needs.
| Component | What the page covers |
|---|---|
| Field | The label, hint and error message every form control shares |
| Input | Single-line text entry, with every input type and validation state |
| Textarea | Multi-line text entry, with resizing and a character count |
| Checkbox | On, off and indeterminate, on its own or in a group |
| Radio Group | One choice out of a few, moved through with the arrow keys |
| Switch | A setting that takes effect as soon as it's flipped |
| Select | One choice out of many, picked from a list |
Overlays
Overlays share how they take and return focus, how they close with Escape or a click outside, and how they stack on top of the page.
| Component | What the page covers |
|---|---|
| Dialog | A modal window that holds focus until it's closed |
| Popover | Content anchored to its trigger, without blocking the page |
| Tooltip | A short description, shown on hover and focus |
| Dropdown Menu | A list of actions behind a button |
| Toast | A brief message that doesn't interrupt, announced to screen readers |
Navigation and disclosure
These components move people around a page or a site, or show and hide what's on it.
| Component | What the page covers |
|---|---|
| Link | Links in text and on their own, including external ones |
| Tabs | Panels of related content, one at a time |
| Accordion | Sections that expand and collapse |
| Breadcrumb | Where the current page sits in the site |
| Pagination | Moving through pages of results |
Feedback and display
These components show information and status, and most of them aren't interactive, so their rules are about meaning, contrast and announcements.
| Component | What the page covers |
|---|---|
| Alert | A message that stays on the page, for information, success, warnings and errors |
| Badge | Short labels for status and counts |
| Avatar | A person or an entity, with an image, initials or an icon |
| Progress | How far along a task is, whether or not its length is known |
| Skeleton | Placeholders that hold the layout while content loads |
| Card | Related content grouped in one container |
Later
These are the composite widgets with the most keyboard behaviour, and they build on almost everything above.
| Component | What the page covers |
|---|---|
| Combobox | Text entry with suggestions, filtered as you type |
| Slider | A value or a range, picked by dragging or with the arrow keys |
| Date Picker | Dates and ranges, typed in or picked from a calendar |
| Table | Tabular data, with sorting and selection |
| Tree View | Nested lists that expand and collapse |
| Command Palette | Every action in one place, searched from the keyboard |
Before a page ships
Until a component has its page, you can still hold it to the standard. The three layers in the Introduction apply to every component, Design Tokens covers how to name its variables, and the Button shows how the layers turn into rules you can check.
The same goes for your agents. Point them at /llms-full.txt, and ask them to follow the Button's structure for the component you're building.
Suggest a component
Need a component that isn't listed, or one that's further down? Open an issue and tell us what you're building. It helps us decide what comes next.