# Components

> The design-system components and colour tokens a page may use.

`import { Button, ... } from "@0x1audio/design-system"`

Only these components and tokens below the hero; no hex colours; one filled Button per view; design empty, working, done and error states; check light and dark.

The same index the MCP tool `ui_components` returns, so an agent and this page never disagree.

## Actions

| Component | Props | Use it for |
| --- | --- | --- |
| `Button` | className, variant, size, ...props | variant = default (filled) · secondary · outline · ghost · destructive · outline-destructive · link; size = sm · default · lg · icon · icon-sm. |
| `DropdownMenu` | ...props (MenuPrimitive.Root.Props) | row actions, sort, and filters. |
| `Tabs` | className, ...props (TabsPrimitive.Root.Props) | a segmented control for switching what a list shows (Sounds, MIDI, Other). |

## Inputs

| Component | Props | Use it for |
| --- | --- | --- |
| `Input` | className, type, ...props (React.ComponentProps<"input">) | one field look: bg-field, a hairline border-input, shadow-xs, a stronger border on hover, the ink ring on focus. |
| `Textarea` | className, ...props (React.ComponentProps<"textarea">) | one field look: bg-field, a hairline border-input, shadow-xs, a stronger border on hover, the ink ring on focus. |
| `Combobox` | items: readonly ComboboxOption[], value: string, onValueChange: (value: string) => void, placeholder?: string, empty?: string | one field look: bg-field, a hairline border-input, shadow-xs, a stronger border on hover, the ink ring on focus. |
| `InputOTP` | id?: string, disabled?: boolean, onValueChange?: (value: string) => void | one field look: bg-field, a hairline border-input, shadow-xs, a stronger border on hover, the ink ring on focus. |
| `SearchField` | value: string, onChange: (value: string) => void, label: string, placeholder?: string, size?: keyof typeof searchSizes, className?: string | search in a toolbar. |
| `Checkbox` | className, ...props (CheckboxPrimitive.Root.Props) | as named. |
| `Switch` | className, ...props (SwitchPrimitive.Root.Props) | as named. |
| `Slider` | className, thumbLabels, valueText, origin, ...props | as named. |
| `FolderField` | value: string, onValueChange: (value: string) => void, onBrowse: () => void, placeholder?: string, disabled?: boolean, browseLabel?: string, className?: string | as named. |

## Structure

| Component | Props | Use it for |
| --- | --- | --- |
| `PageHeader` | title, eyebrow, description, actions, className, ...props | every page. |
| `PageSection` | title, description, actions, className, children, ...props | a titled part of a page, with at most one action (usually "See all"). |
| `Card` | className, ...props (React.ComponentProps<"div">) | a raised surface for a group of related things. |
| `Separator` | className, orientation, ...props (SeparatorPrimitive.Props) | between groups in a menu or a toolbar. |
| `IconTile` | size, tone, className, ...props | an icon on a plate (empty states, step lists, settings hubs). |
| `AppIcon` | name: string, accent?: string, icon?: string, size?: AppIconSize, className?: string | the tile that stands for an app, everywhere (desktop, web, docs). |
| `Avatar` | name: string, src?: string, size?: keyof typeof avatarSizes, className?: string | a person, as the first letter of their name or email on a bg-secondary disc, or their photo. |

## Feedback

| Component | Props | Use it for |
| --- | --- | --- |
| `EmptyState` | icon, title, description, actions, pixel, className, children, ...props | what will appear here, and the first step (at most two actions). |
| `Callout` | tone, icon, title, actions, className, children, ...props | a message inside the page. |
| `Skeleton` | className, ...props (React.ComponentProps<"div">) | loading, in the shape of the final layout. |
| `Spinner` | className, ...props (ComponentProps<"span">) | inside a button that is working ("Installing…"), or a one-line status. |
| `Progress` | className, pulse, indeterminate, value, ...props | a job with a known size (value) or not (indeterminate). |
| `Badge` | className, tone, ...props | a short status in a row or card (tone). |
| `Toaster` | theme, position, ...props (ToasterProps) | bottom-right of the page above the player strip, one line as wide as it needs, one optional action (usually Undo, Try again or Show in Finder) drawn as an… |
| `Tooltip` | label: ReactNode, shortcut?: string, side?: "top" \| "bottom" \| "left" \| "right", disabled?: boolean, children: ReactElement, className?: string | an icon button's name and key on hover and focus ("Show details ⌥⌘I"), ink on the page colour, centred under it. |
| `Kbd` | className, ...props (React.ComponentProps<"kbd">) | a key in a hint or a menu. |
| `ListSummary` | className, ...props (React.ComponentProps<"p">) | a list's closing line, "Showing 3 of 40 sounds". |

## Audio

| Component | Props | Use it for |
| --- | --- | --- |
| `Waveform` | label: string, detail?: string, wave?: Wave \| null, empty: string, className?: string | the Library outside the desktop (cloud web, app pages). |
| `LibraryDialog` | open: boolean, onOpenChange: (open: boolean) => void, onPick: (paths: string[]) => void, multiple?: boolean, disabled?: boolean | the Library outside the desktop (cloud web, app pages). |
| `Dropzone` | title?: ReactNode, description?: ReactNode, dragging?: boolean, disabled?: boolean, multiple?: boolean, onChoose?: (paths: string[]) => void, extra?: ReactNode, className?: string | the Library outside the desktop (cloud web, app pages). |
| `ActionForm` | action: string \| ActionSpec, host?: ActionHost, openWith?: string[], onSettled?: (outcome: Settled) => void, className?: string | generated app UIs. |
| `AppHero` | accent?: string, icon?: string, wordmark: ReactNode, description?: ReactNode, art?: ReactNode, className?: string | generated app UIs. |

## Colour tokens

Use them as `bg-<token>`, `text-<token>`, `border-<token>`. Never a hex colour.

`accent` · `accent-foreground` · `background` · `border` · `border-strong` · `brand` · `card` · `card-foreground` · `chrome` · `destructive` · `field` · `field-hover` · `foreground` · `hover` · `input` · `lit` · `muted` · `muted-foreground` · `popover` · `popover-foreground` · `pressed` · `primary` · `primary-foreground` · `ring` · `scrim` · `secondary` · `secondary-foreground` · `secondary-hover` · `secondary-pressed` · `selected` · `subtle-foreground` · `success` · `warning` · `warning-foreground` · `wave`