Components
60 components are built today — every one on real semantic HTML or a WAI-ARIA pattern, not a <div> standing in for one. The full set is live.
New here? Start with installation to get a package running, then theming for the token reference behind every colour and radius on this site.
Primitives
- AvatarReal image, with an initials fallback.<img>
- BadgeA small status chip.<span>
- ButtonClick, keyboard, and form association, for free.<button>
- CheckboxTri-state, styled with :checked and :indeterminate.<input type="checkbox">
- LabelA standalone label for custom composed controls.<label>
- Radio GroupGrouped choice with native arrow-key roving.<fieldset> + <input type="radio">
- SeparatorA divider that's already role="separator".<hr>
- SwitchThe WAI-ARIA switch pattern on a real button.<button role="switch">
- ToggleA two-state toggle that looks and acts like a button.<button aria-pressed>
Forms
- Color PickerA real colour input, plus a typeable hex field on the same value.<input type="color"> + editable hex <input>
- ComboboxFilterable list with aria-activedescendant.<input role="combobox"> + popover listbox
- File UploadDrag-and-drop over a real file input, with optional square image preview moulding.<label> + <input type="file">
- Input OTPOne-time-code entry with roving focus.a row of real <input>
- Number FieldTextField's scaffold, specialised for numbers.<input type="number"> + native stepUp()/stepDown()
- SelectThe platform's own picker UI, on every device.<select>
- SliderCustom-painted thumb, native drag and keyboard behaviour.<input type="range">
- Tag InputFreeform text that commits into discrete, removable tags.role="list" of removable tags + trailing <input>
- Text FieldCorrect labelling and live validation styling.<label> + <input>
- TextareaAuto-growing with field-sizing: content.<textarea>
Layout
- CardFor genuinely self-contained, distributable content.<article> / <div>
- FooterThe contentinfo landmark.<footer>
- HeaderThe banner landmark.<header>
- NavActive state via aria-current, no client JS.<nav> + <ul>
- ResizablePane-to-pane split layouts.CSS resize / pointer-driven splitters
- Scroll AreaCustom scrollbar styling as enhancement only.native scroll + scrollbar-gutter
- SidebarThe complementary landmark.<aside>
Feedback
- CalloutLive-region feedback that announces itself.role="alert" / role="status"
- ProgressReports its own value to assistive tech, natively.<progress>
- SkeletonLoading placeholder tied to real content dimensions.<div aria-hidden="true">
- ToastA shared, queued live region.role="status" / role="alert" (queued)
Overlays
- Command PaletteA searchable, keyboard-driven action list.<dialog> + <input> + role="listbox"
- Context MenuRight-click menu, same primitives as Dropdown Menu.role="menu" at cursor position
- DialogshowModal(): focus trap, top layer, and ::backdrop, free.<dialog>
- Dropdown MenuAnchor-positioned menu with arrow-key navigation.popover + role="menu"
- Hover CardRich hover preview, a heavier Tooltip.popover=hint / interestfor
- Navigation MenuMulti-level site navigation, mega-menu via popover.<nav> + nested disclosure
- PopoverAnchor-positioned floating panel.popover + anchor positioning
- SheetA Dialog anchored to an edge, with drag-to-dismiss.<dialog> + pointer events
- TooltipHover/focus hints via the Popover API.popover + interestfor
Navigation
Data Display
- AccordionNative disclosure, exclusive open via a shared name.<details> + <summary>
- CarouselNative scrolling instead of a JS carousel engine.scroll-snap-type / scroll-snap-align
- Data TableTable plus the behaviour layered on top.<table> + sort/filter/paginate
- Date PickerCalendar grid with aria-selected.<table> grid of <button> day cells
- Date Range PickerTwo-click range selection over the same calendar grid.<table> grid of <button> day cells
- TableSortable headers, real <caption>, real <th scope>.<table>
AI
- Agent ActivityOne chronological stream of reasoning, searches, tool calls, and traces.<ol> of steps
- Code BlockA code surface with line numbers, copy, and stable streaming.<figure> + <pre><code>
- ComposerA chat message input, with a live "thinking" state.<textarea> with field-sizing: content
- File DiffFile changes as a real table, with live counts and progressive rows.<details> + <table>
- MessageConversation rows: authored, grouped, aligned, optionally expandable.<ol> + <li> + <article>
- Message ScrollerFollows streamed output at the live edge, and lets go when the reader scrolls away.role="log" overflow container
- ReasoningA collapsible AI reasoning trace that auto-opens while streaming.<details> + <summary>
- SourcesCited sources and inline numbered citation chips for grounded answers.<section> + <ul> of <a>
- SuggestionPrompt suggestion chips that seed the next composer message.<ul role="list"> of <button>
- Thinking IndicatorThe universal typing-indicator dots, next to real visible text.role="status"
- Todo ListAn agent's task plan, with cross-fading status marks and a live completion count.<details> + <ol>
- Tool CallCollapsible agent tool status with pending, running, complete, and error states.<details> + <summary>