Components

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Alert

Displays a callout for user attention.

Aspect Ratio

Displays content within a desired ratio.

Avatar

An image element with a fallback for representing the user.

Badge

Displays a badge or a component that looks like a badge.

Breadcrumb

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

Button Group

A container that groups related buttons together with consistent styling.

Button

Displays a button or a component that looks like a button.

Calendar

A calendar component that allows users to select a date or a range of dates.

Card

Displays a card with header, content, and footer.

Carousel

A carousel with motion and swipe built using Embla.

Checkbox

A control that allows the user to toggle between checked and not checked.

Code

Used to display inline code.

Collapsible

An interactive component which expands/collapses a panel.

Combobox

Autocomplete input with a list of suggestions.

Command

Command menu for search and quick actions.

Context Menu

Displays a menu of actions triggered by a right click.

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Drawer

A drawer component for React.

Dropdown Menu

Displays a menu to the user – such as a set of actions or functions – triggered by a button.

Empty

Use the Empty component to display an empty state.

Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Hover Card

For sighted users to preview content available behind a link.

Input Group

Add addons, buttons, and helper content to inputs.

Input OTP

Accessible one-time password component with copy-paste functionality.

Input

A text input component for forms and user data entry with built-in styling and accessibility features.

Item

A versatile component for displaying content with media, title, description, and actions.

Kbd

Used to display textual user input from keyboard.

Label

Renders an accessible label associated with controls.

Link

A styled anchor element for navigation and linking to resources.

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Native Select

A styled native HTML select element with consistent design system integration.

Pagination

Pagination with page navigation, next and previous links.

Popover

Displays rich content in a portal, triggered by a button.

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Radio Group

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

Resizable

Accessible resizable panel groups and layouts with keyboard support.

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Select

Displays a list of options for the user to pick from – triggered by a button.

Separator

Visually or semantically separates content.

Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Skeleton

Use to show a placeholder while content is loading.

Slider

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

Sonner

An opinionated toast component for React.

Spinner

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

Switch