Components

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

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

A command menu for fast search, navigation, and actions.

A horizontal application menu with nested actions.

A responsive navigation menu with rich dropdown content.

Pagination controls for moving through a collection of pages.

A complete, collapsible application sidebar system.

A set of layered sections of content, also known as tab panels.

Displays a callout for user attention.

A reusable empty state pattern for missing or incomplete content.

Displays an indicator showing the completion progress of a task.

Use to show a placeholder while content is loading.

Toast notifications for success, loading, warning, and error feedback.

A compact loading indicator for pending UI states.

Legacy toast guidance represented here with the current Sonner implementation.

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

A menu triggered by right click or long press for contextual actions.

A window overlaid on either the primary window or another dialog window.

A panel that slides from the edge of the screen, commonly used on mobile.

Displays a menu of actions or links from a trigger.

Shows rich contextual content when a user hovers or focuses a trigger.

Displays floating content anchored to a trigger.

A side panel for secondary workflows and focused tasks.

A popup that displays information related to an element when it receives keyboard focus.

Displays content within a desired aspect ratio.

Displays a card with header, content, and footer.

An interactive region that expands and collapses content.

A direction provider for left-to-right and right-to-left interface contexts.

Resizable panel groups for split views and editor-like layouts.

Custom scrollable areas with consistent scrollbar styling.

Visually or semantically separates content.

An image element with a fallback for representing a user.

Displays a small status descriptor.

A carousel with motion and swipe built using Embla.

A structured row primitive for lists, settings, and action groups.

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

Groups related buttons and controls into a single connected action surface.

A date field component that allows users to enter and edit date.

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

A searchable select input for choosing from a list of options.

A calendar-based date selection pattern using popover and calendar primitives.

Composable field, fieldset, label, description, and error primitives.

Displays a form input field.

Composes inputs with prefixes, suffixes, buttons, and helper controls.

Accessible one-time password component with copy paste functionality.

Renders an accessible label associated with controls.

A styled native select control for platform-native option picking.

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

Displays a list of options for the user to pick from.

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

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

Displays a form textarea or a component that looks like a textarea.

A two-state button that can be pressed or unpressed.

A set of two-state buttons for mutually exclusive or multi-select options.

Composable chart primitives powered by Recharts and semantic theme tokens.

Displays tabular data with headers, rows, cells, and captions.

Displays keyboard shortcuts and command hints.

Readable prose, headings, lists, and inline text treatments.