Registry

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

Displays a callout for user attention with optional title, description, and action.

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

A full-width site banner with light, dark, and gray theme variants, plus an Embla carousel slider.

Displays content within a desired aspect ratio.

Displays a file or image attachment with media, metadata, upload state, and actions.

An image element with a fallback for representing the user.

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

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

Colored message surfaces for chat and conversation UIs, with optional reactions.

A polymorphic button with variants, sizes, icons, and a CTA group helper.

A container that groups related buttons with shared borders and orientation.

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

Displays a card with header, content, and footer.

A carousel with motion and swipe built using Embla.

Beautiful charts built using Recharts with a themed chart container, tooltip, and legend.

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

An interactive component which expands/collapses a panel.

Autocomplete input with a list of suggestions.

Command menu for search and quick actions.

A centered content wrapper with max-width size variants.

Displays a menu of actions triggered by a right click.

Powerful table and datagrids built using TanStack Table.

A date picker component with range and presets.

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

A provider component that sets the text direction for your application.

A drawer component for menus and content that slides from an edge of the screen.

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

Use the Empty component to display an empty state.

Combine labels, controls, descriptions, and errors into accessible form fields.

A semantic heading with independent size, weight, and tone controls.

A full-bleed marketing hero with announcement badge, dual CTAs, and product screenshot.

For sighted users to preview content available behind a link.

A typed icon component with size variants and a custom icon set.

Displays a form input field or a component that looks like an input field.

Display additional information or actions to an input or textarea.

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

A versatile component for displaying content in lists, cards, or menus.

Used to display textual user input from keyboard.

Renders an accessible label associated with controls.

An absolute positioned anchor that makes an entire container clickable.

A polymorphic text link with tone, underline, size, and external-link controls.

A typed logo component with size variants and a brand logo set.

A marker for labeling sections with optional icons, borders, and separators.

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

Layout primitives for chat rows with avatars, headers, and footers.

Auto-scrolling container for chat message lists with jump-to controls.

Cycles light, dark, and system theme modes and persists the choice.

A styled native HTML select element with options and option groups.

A collection of links for navigating websites.

Pagination with page navigation, next and previous links.

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

Displays an indicator showing the completion progress of a task.

A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.

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

Accessible resizable panel groups and layouts with keyboard support.

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

Utilities for adding a fade effect to the edges of a scroll container.

A semantic section wrapper with responsive vertical padding variants.

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 content of the screen.

Utilities for adding a shimmer effect to text elements.

A composable, themeable, and customizable sidebar component.

Use to show a placeholder while content is loading.

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

An accessible loading spinner built on Lucide's Loader2 icon.

Design system globals and theme CSS for consumer apps.

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

A responsive table component.

A set of layered sections of content—known as tab panels—that are displayed one at a time.

A polymorphic body text component with size, weight, tone, and alignment controls.

Displays a multi-line text input field.

Switches between branded data-theme palettes and persists the choice.

A succinct message that is displayed temporarily.

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

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

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Locks page scroll by toggling overflow-hidden on document.body.

Closes a mobile menu or overlay when the viewport is resized.

A small hook that copies text and tracks the latest copy result.

Detects whether the viewport matches a mobile max-width media query.