70+ ready-to-use components.

Blocking confirmation modal requiring an explicit decision. Backs the browser back button.

Locks content to a specific width-to-height ratio. Useful for images, videos, and embeds.

File/media card with upload states, three sizes, and horizontal or vertical orientations.

User icon with image support and initials fallback. Compose with AvatarGroup for stacks.

Compact label for status, category, or count. Four variants cover most use cases.

Hierarchical location trail. Supports custom separators, ellipsis, and asChild links.

Chat message bubble with seven color variants, start/end alignment, and optional reaction pills.

Horizontal or vertical group that visually joins adjacent buttons into a single control.

Full calendar built on @daypicker/react. Supports single, multiple, and range selection.

Elevated surface for grouping related content. Compose Header, Content, and Footer slots freely.

Embla-powered slide carousel with prev/next controls. Supports horizontal and vertical axes.

Binary control with indeterminate state. Controlled or uncontrolled via onCheckedChange.

Card-style multi-select. Each card has a built-in checkbox with highlighted selected state.

Multi-select group of checkboxes sharing a value array. Supports disabled items.

Togglable content section with animated expand/collapse. Controlled or uncontrolled.

Command palette with fuzzy search, groups, keyboard shortcuts, and empty state.

Right-click menu with items, checkboxes, radio groups, submenus, and shortcuts.

A date and date-range picker composed from a Popover and the Calendar component.

Modal window with focus trap, backdrop blur, and accessible close. Use AlertDialog for destructive confirms.

Bottom sheet drawer built on Vaul. Supports drag-to-dismiss and scale background.

Contextual action menu with keyboard navigation, shortcuts, checkboxes, and radio groups.

Empty-state layout with media, title, description, and action slots.

React Hook Form integration with accessible label, description, and error message binding.

Rich preview card that appears on hover. Ideal for user profiles and link previews.

Text input with focus ring, disabled state, and file input styling.

Numeric input with increment/decrement controls, min/max/step, and format options.

One-time password input with slot groups and separator. Built on input-otp.

Password field with a show/hide toggle. Extends Input Group with no extra markup.

Search field with a leading icon and a one-click clear button. Controlled or uncontrolled.

Keyboard shortcut display. Use KbdGroup to compose multi-key combos.

Accessible form label that forwards htmlFor. Pairs with any form control.

Inline feed divider — a date, an unread line, or a section label as a plain, separator, or bordered row.

Chat message row pairing an avatar with a content column; mirrors for the current author.

Scroll manager for chat transcripts: follow-the-bottom, prepend preservation, anchored turns, and a scroll-to-edge button.

Styled HTML select element with option groups. Zero JS — best for mobile forms.

Non-modal floating panel anchored to a trigger. Use for settings panels and pickers.

Determinate progress bar. Pass value 0–100. Colour via className on the indicator slot.

Circular progress indicator with optional value label and animation. Multiple sizes.

Single native radio input. Use Radio Group for accessible keyboard-navigable groups.

Card-style single-select. Each card highlights when selected, ideal for plan pickers.

Single-selection group. Use value + onValueChange for controlled behaviour.

Custom-styled scrollbar that matches your design system. Hides native OS scrollbars.

Accessible dropdown selector. Supports groups, disabled options, and custom triggers.

Semantic horizontal or vertical divider. Renders as hr with role=separator.

Side-anchored panel (left, right, top, or bottom). Useful for settings and detail drawers.

Range input with keyboard support. Supports min, max, step, and multiple thumbs.

Indeterminate loading indicator. Wrap children — shown when loading is false.

Toggle control for boolean settings. Fires onCheckedChange with the new boolean value.

Multiline text input. Pair with Label and field utilities for accessible forms.

Pressable button with active/inactive state. Use ToggleGroup for exclusive selection.

Single or multiple selection group of toggle buttons. Ideal for toolbars and alignment pickers.

Hover label with delay and side placement control. Supports rich content including Kbd.