ComponentsOverview
Components
Every component in the registry, with what its docs page currently shows.
39 components, each built on a Base UI primitive and styled only through semantic tokens.
Reading the Preview column
- controls — the page renders the real component with live prop inputs generated from its TypeScript props. 5 pages.
- preview — the page renders a fixed, representative composition. Compound
components (
Dialog.Root+Trigger+Popup, and friends) have no single prop set to drive, so a composition is the honest thing to show. Vary them in Storybook:npm run storybook. 34 pages.
Previews are lifted from each component's Storybook Default story by
npm run docs:gen, so they cannot drift from what is tested.
Catalog
| Component | Install | Preview |
|---|---|---|
| Accordion | @sc1m/accordion | preview |
| AI Summary | @sc1m/ai-summary | preview |
| Alert Dialog | @sc1m/alert-dialog | preview |
| Autocomplete | @sc1m/autocomplete | preview |
| Avatar | @sc1m/avatar | preview |
| Button | @sc1m/button | controls |
| Checkbox | @sc1m/checkbox | preview |
| Checkbox Group | @sc1m/checkbox-group | preview |
| Collapsible | @sc1m/collapsible | preview |
| Combobox | @sc1m/combobox | preview |
| Context Menu | @sc1m/context-menu | preview |
| Dialog | @sc1m/dialog | preview |
| Drawer | @sc1m/drawer | preview |
| Field | @sc1m/field | preview |
| Fieldset | @sc1m/fieldset | preview |
| Form | @sc1m/form | preview |
| Input | @sc1m/input | controls |
| Menu | @sc1m/menu | preview |
| Menubar | @sc1m/menubar | preview |
| Meter | @sc1m/meter | preview |
| Navigation Menu | @sc1m/navigation-menu | preview |
| Number Field | @sc1m/number-field | preview |
| Otp Field | @sc1m/otp-field | preview |
| Popover | @sc1m/popover | preview |
| Preview Card | @sc1m/preview-card | preview |
| Progress | @sc1m/progress | preview |
| Radio | @sc1m/radio | preview |
| Radio Group | @sc1m/radio-group | preview |
| Scroll Area | @sc1m/scroll-area | preview |
| Select | @sc1m/select | preview |
| Separator | @sc1m/separator | preview |
| Slider | @sc1m/slider | controls |
| Switch | @sc1m/switch | controls |
| Tabs | @sc1m/tabs | preview |
| Toast | @sc1m/toast | preview |
| Toggle | @sc1m/toggle | preview |
| Toggle Group | @sc1m/toggle-group | preview |
| Toolbar | @sc1m/toolbar | preview |
| Tooltip | @sc1m/tooltip | controls |
AI authorship
One hue, derived from the brand, marks every surface an AI wrote — and it inverts correctly on its own.
Accordion
A vertically stacked set of headers that each reveal a section of content. Use it to compress secondary detail into a scannable list — not to hide anything a person needs to complete a task.