Design System / 07

Components

Browse components by task. Each family page includes live examples, usage notes, and prop references; motion examples also show their reduced-motion behavior.

Families

A rich text editor is outside the package scope. Build one at the application layer from the field, menu, and toolbar primitives.

Component directory

Search by component name or job, then open its live specimen and API reference. Family names and tasks such as charts, auth, or motion also work.

Find a component or task

185 results

Choose by job

Start with the interaction or information shape. Visual treatment is a secondary choice, not a reason to substitute one behavior for another.

Field treatment

Standard product form: TextField
Quiet editorial entry: UnderlineField
Compact boxed entry: GhostField
Hosted sign-in flow: AuthField

Compact peer views: Tabs
Full-width peer views: FluidTabs
Long vertical labels: VerticalTabs
Expressive feature switcher: SpotlightTabs

Overlay behavior

Short non-interactive hint: Tooltip
Anchored interactive content: Popover
Short command list: DropdownMenu
Blocking decision or form: Modal
Edge-aligned supporting task: Drawer

Information shape

Comparable exact records: DataTable
Editorial list with metadata: IndexTable
Stable key-value record: ProjectLedger
Trend with exact fallback: ChartFrame

Field treatment

Navigation model

Overlay behavior

Information shape