9.2k

A new, modern UI component library built on top of Base UI.

Built for developers and AI.

Accordion

A set of collapsible panels with headings and content.

Alert

A callout for displaying important information.

Alert Dialog

A dialog that requires user response to proceed.

Autocomplete

An input that suggests options as you type.

Avatar

An image element with a fallback for representing the user.

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.

Card

A content container for grouping related information.

Checkbox

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

Checkbox Group

Provides shared state to a series of checkboxes.

Collapsible

A collapsible panel controlled by a button trigger.

Combobox

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

Command

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

Dialog

A popup that opens on top of the entire page.

Empty

A container for displaying empty state information.

Field

A component that provides labelling and validation for form controls.

Fieldset

A native fieldset element with a legend.

Form

A form wrapper component that simplifies validation and submission.

Frame

A framed container for grouping related information.

Group

A component for visually grouping a series of controls.

Input

A native input element.

Input Group

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

Kbd

A component for displaying keyboard keys and shortcuts.

K

Label

Renders an accessible label associated with controls.

Menu

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

Meter

A graphical display of a numeric value within a range.

Number Field

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

Pagination

A pagination with page navigation, next and previous links.

Popover

An accessible popup anchored to a button.

Preview Card

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

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.

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.

Skeleton

A loading state skeleton for your components.

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.

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.

Textarea

A native textarea element.

Toast

A temporary notification that appears on screen to inform users.

Toggle

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

Toggle Group

Provides a shared state to a series of toggle buttons.

Toolbar

A container for grouping a set of buttons and controls.

Tooltip

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