65+ ready-to-use components.

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

Page navigation with prev/next, ellipsis, and active page. Compose with your router.

Composable application sidebar with collapsible groups, rail, and mobile sheet. Built for app shells.

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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