Components

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

ActionsCopy Anchor Link

InputsCopy Anchor Link

StructureCopy Anchor Link

FeedbackCopy Anchor Link

AudioCopy Anchor Link