A new, modern UI component library.

Built for developers and AI.

Accordion

A set of collapsible panels with headings and content.

New

Alert

A callout for displaying important information.

Alert Dialog

A dialog that requires user response to proceed.

New

Autocomplete

An input that suggests options as you type.

New

Avatar

An image element with a fallback for representing the user.

New

Badge

A badge or a component that looks like a badge.

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Button

A button or a component that looks like a button.

Calendar

A date picker component with range and multi-select support.

New

Card

A content container for grouping related information.

New

Checkbox

A control allowing the user to toggle between checked and not checked.

Checkbox Group

Provides shared state to a series of checkboxes.

New

Collapsible

A collapsible panel controlled by a button trigger.

New

Combobox

An input combined with a list of predefined items to select.

New

Command

A command palette component built with Dialog and Autocomplete for searching and executing commands.

New

Context Menu

A menu that appears at the pointer on right click or long press.

New

Date Picker

A date picker component built with Calendar and Popover.

New

Dialog

A popup that opens on top of the entire page.

New

Drawer

A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.

New

Empty

A container for displaying empty state information.

New

Field

A component that provides labelling and validation for form controls.

New

Fieldset

A native fieldset element with a legend.

New

Form

A form wrapper component that simplifies validation and submission.

New

Frame

A framed container for grouping related information.

New

Group

A component for visually grouping a series of controls.

New

Input

A native input element.

Input Group

A flexible component for grouping inputs with addons, buttons, and other elements.

New

Kbd

A component for displaying keyboard keys and shortcuts.

New
⌘
K

Label

Renders an accessible label associated with controls.

Menu

A list of actions in a dropdown, enhanced with keyboard navigation.

New

Meter

A graphical display of a numeric value within a range.

New

Number Field

A numeric input element with increment and decrement buttons, and a scrub area.

Otp Field

A segmented input for one-time passwords and verification codes.

New

Pagination

A pagination with page navigation, next and previous links.

Popover

An accessible popup anchored to a button.

New

Preview Card

A popup that appears when a link is hovered, showing a preview for sighted users.

New

Progress

Displays the status of a task that takes a long time.

Radio Group

A set of checkable buttons where no more than one of the buttons can be checked at a time.

Scroll Area

A native scroll container with custom scrollbars.

New

Select

A common form component for choosing a predefined value in a dropdown menu.

Separator

A separator element accessible to screen readers.

Sheet

A flyout that opens from the side of the screen, based on the dialog component.

New

Skeleton

A loading state skeleton for your components.

New

Slider

An input where the user selects a value from within a given range.

Spinner

An indicator that can be used to show a loading state.

Stepper

A sequence of steps that shows where the user is in a multi-stage flow.

New
2
3
4

Switch

A control that indicates whether a setting is on or off.

Table

A simple table component for displaying tabular data.

Tabs

A component for toggling between related panels on the same page.

New

Textarea

A native textarea element.

Toast

A temporary notification that appears on screen to inform users.

New

Toggle

A two-state button that can be toggled on or off.

New

Toggle Group

Provides a shared state to a series of toggle buttons.

New

Toolbar

A container for grouping a set of buttons and controls.

New

Tooltip

A popup that appears when an element is hovered or focused, showing a hint for sighted users.