COMPONENT DIRECTORY

Install only the interface parts you need.

Forms, overlays, navigation, data display and feedback share one surface and interaction language.

Components

Search by name or purpose, then open a component page to install it.

56 results

Templates
Actions & overlayssource

Button

The primary action control with raised, pressed, and primary states.

Actions & overlayssource

Dialog

A modal surface that safely traps focus and restores it to the original trigger.

Actions & overlayssource

Dropdown Menu

A contextual menu for keyboard navigation through actions, selections, and submenus.

Actions & overlayssource

Alert Dialog

An explicit confirmation for an irreversible action.

Actions & overlayssource

Popover

An anchored panel for contextual settings.

Actions & overlayssource

Hover Card

A supplemental preview of a link destination.

Actions & overlayssource

Sheet

A scrollable task panel attached to a viewport edge.

Actions & overlayssource

Context Menu

A pointer-positioned action menu with checkbox, radio, and submenu items.

Actions & overlayssource

Drawer

A bottom or side task panel that can be dismissed with a swipe.

Forms & selectionsource

Checkbox

A native checkbox supporting boolean and indeterminate states.

Forms & selectionsource

Input

An inset single-line input with clear focus and validation states.

Forms & selectionsource

Input Group

A composable field that groups an input, addons, and actions on one inset surface.

Forms & selectionsource

Label

A native label that connects a form control name to its click target.

Forms & selectionsource

Radio Group

A group of native radio inputs for selecting a single value.

Forms & selectionsource

Select

A native select surface that preserves browser accessibility.

Forms & selectionsource

Slider

A range control for adjusting one or more values on a horizontal or vertical track.

Forms & selectionsource

Switch

An on-or-off control that presents immediately applied settings on a pressed track.

Forms & selectionsource

Textarea

A resizable inset field for entering multiline text.

Forms & selectionsource

Toggle

A standalone button with a persistent pressed state.

Forms & selectionsource

Toggle Group

A keyboard-navigable group of single or multiple selections.

Forms & selectionsource

Field

Connect a control with its label, description, and validation errors.

Forms & selectionsource

Fieldset

Group related controls under a shared legend and disabled state.

Forms & selectionsource

Form

A native form coordinating field validation and submission errors.

Forms & selectionsource

Number Field

Numeric entry with bounds, steps, and locale-aware formatting.

Forms & selectionsource

Combobox

Searchable selection with filtering, empty results, and keyboard interaction.

Forms & selectionsource

Calendar

A neumorphic calendar for single dates and ranges.

Forms & selectionsource

Date Picker

Choose and clear a date in a focused popover.

Forms & selectionsource

Input OTP

A verification-code input that combines one real input with multiple visual slots.

Navigation & disclosuresource

Accordion

A disclosure group that expands one section at a time or multiple sections together.

Navigation & disclosuresource

Breadcrumb

Displays the path to the current page as a meaningful ordered list.

Navigation & disclosuresource

Pagination

A set of raised links that identifies the current page and previous or next navigation.

Navigation & disclosuresource

Tabs

A tab interface for keyboard switching between panels in the same context.

Navigation & disclosuresource

Tooltip

A popup that provides a short supporting description on hover and keyboard focus.

Navigation & disclosuresource

Collapsible

Reveal or hide one group of optional settings.

Navigation & disclosuresource

Toolbar

An arrow-key-navigable set of document actions.

Navigation & disclosuresource

Navigation Menu

Keyboard-aware website navigation with links and floating panels.

Navigation & disclosuresource

Menubar

Application command menus with roving keyboard focus.

Navigation & disclosuresource

Command

A searchable command palette and quick-navigation list with keyboard selection.

Navigation & disclosuresource

Carousel

A sequential content view navigated by touch, buttons, and arrow keys.

Navigation & disclosuresource

Resizable

Split panels whose proportions can be adjusted with pointer or keyboard.

Navigation & disclosuresource

Sidebar

Application navigation with desktop collapse and a mobile Sheet.

Data & feedbacksource

Alert

A message that communicates important status and outcomes on a raised surface.

Data & feedbacksource

Avatar

A profile surface that preserves its fallback when an image fails to load.

Data & feedbacksource

Badge

A concise inline label for displaying status and classification clearly.

Data & feedbacksource

Card

A surface that groups content at raised, soft, inset, or flat depth.

Data & feedbacksource

Progress

Progress status rendered as a primary fill inside an inset track.

Data & feedbacksource

Scroll Area

A themed overflow surface that preserves native browser scrolling.

Data & feedbacksource

Separator

A divider that expresses boundaries between related content with light and a fine shadow.

Data & feedbacksource

Skeleton

An inset placeholder that previews the size and position of content while it loads.

Data & feedbacksource

Table

A semantic data table that scrolls horizontally on smaller screens.

Data & feedbacksource

Meter

Represent a measurement within a known range.

Data & feedbacksource

Data Table

Compose search, filters, sorting, row selection and pagination.

Data & feedbacksource

Toast

Notifications with result messages and undo actions.

Data & feedbacksource

Chart

Responsive chart surfaces, tooltips and exact-data tables.

Data & feedbacksource

Image Card

A content card that combines an image and description on one raised surface.

Data & feedbacksource

Marquee

A repeating information strip with pause controls and reduced-motion support.