Components

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

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

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

An explicit confirmation for an irreversible action.

An anchored panel for contextual settings.

A supplemental preview of a link destination.

A scrollable task panel attached to a viewport edge.

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

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

A native checkbox supporting boolean and indeterminate states.

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

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

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

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

A native select surface that preserves browser accessibility.

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

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

A resizable inset field for entering multiline text.

A standalone button with a persistent pressed state.

A keyboard-navigable group of single or multiple selections.

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

Group related controls under a shared legend and disabled state.

A native form coordinating field validation and submission errors.

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

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

A neumorphic calendar for single dates and ranges.

Choose and clear a date in a focused popover.

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

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

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

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

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

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

Reveal or hide one group of optional settings.

An arrow-key-navigable set of document actions.

Keyboard-aware website navigation with links and floating panels.

Application command menus with roving keyboard focus.

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

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

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

Application navigation with desktop collapse and a mobile Sheet.

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

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

A concise inline label for displaying status and classification clearly.

A raised, soft, inset, or flat content surface with an accent face for emphasis.

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

A themed overflow surface that preserves native browser scrolling.

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

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

A semantic data table that scrolls horizontally on smaller screens.

Represent a measurement within a known range.

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

Notifications with result messages and undo actions.

Responsive chart surfaces, tooltips and exact-data tables.

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

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