Component library

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

Displays a short, important message in a way that attracts the user's attention.

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

Displays content within a fixed, desired ratio.

An image element with a fallback for representing a user.

Displays a small count, label, or status indicator.

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

Triggers an action or event, such as submitting a form or opening a dialog.

Groups related buttons together with a shared, connected border.

A date field component that lets users enter and edit a date.

A container for grouping related content and actions.

A motion-aware, touch-friendly carousel for cycling through panels of content.

Composable charts built on Recharts, themed with design tokens.

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

An interactive component which expands and collapses a panel.

Autocomplete input and command palette, built from Popover and Command.

A fast, composable command menu for searching and running actions.

A menu triggered by a right click, positioned relative to the trigger.

A window overlaid on the page, rendering content that requires focus or input.

A panel that slides in from the edge of the screen, built on Vaul.

Displays a menu of actions or options triggered by a button.

A placeholder for empty states, with an icon, title, and description.

Layout primitives for building consistent, accessible form fields.

Preview content behind a link or trigger when a user hovers over it.

Displays a form input field for collecting text from the user.

Combines inputs with addons, icons, and buttons into a single control.

An accessible one-time password input, built on top of input-otp.

A flexible layout primitive for rows of content, like list and menu entries.

Displays a keyboard shortcut or key combination.

Renders an accessible label associated with a form control.

A persistent, horizontal set of menus, common in desktop applications.

A styled wrapper around the browser's native select element.

A collection of links and flyout content for site or app navigation.

Navigate between pages of content with page numbers and controls.

Displays rich content in a portal, anchored to a trigger element.

Displays an indicator showing the completion progress of a task.

A set of checkable buttons where only one may be checked at a time.

Accessible, resizable panel groups and layouts with keyboard support.

Augments native scroll with a custom, cross-browser scrollbar.

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

Visually or semantically separates content.

Extends the Dialog component to display content that complements the main view.

A composable, themeable sidebar. This is what powers the nav on this page.

Used to show a placeholder while content is loading.

An input for selecting a value or range from within a set range.

An opinionated toast notification component.

An animated loading indicator.

A control that toggles between checked and not checked, like a light switch.

A responsive table for displaying rows and columns of data.

A set of layered sections of content, shown one at a time.

Displays a multi-line form input field for collecting text.

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

A set of two-state buttons that can be toggled on or off, single or multiple.

A popup that displays information related to an element on hover or focus.