Components

A vertically stacked set of collapsible sections. Port of shadcn/ui accordion.

Displays a callout for user attention. Port of shadcn/ui alert.

A modal dialog that interrupts the user with an important choice. Port of shadcn/ui alert-dialog.

Displays content within a desired aspect ratio. Port of shadcn/ui aspect-ratio.

A file/attachment chip with upload-state, size, and orientation variants. Port of shadcn/ui attachment.

An image element with a fallback for representing a user. Port of shadcn/ui avatar.

Displays a badge or a component that looks like a badge. Port of shadcn/ui badge.

Displays the path to the current resource using a hierarchy of links. Port of shadcn/ui breadcrumb.

A chat bubble (the coloured message body) with variants and alignment. Port of shadcn/ui bubble.

Displays a button. Port of shadcn/ui button.

Groups related buttons and controls together. Port of shadcn/ui button-group.

A date-picker calendar grid with single/range selection and keyboard nav. Original behavior; visuals from shadcn/ui calendar.

Displays a card with header, content, and footer. Port of shadcn/ui card.

A slide carousel with drag, prev/next, and keyboard nav. Port of shadcn/ui carousel (embla).

A native checkbox styled with pure CSS. Port of shadcn/ui checkbox.

An interactive component that expands/collapses a panel. Port of shadcn/ui collapsible.

An autocomplete select — a Popover + Command composition with single/multiple selection. Classic shadcn/ui combobox pattern.

A command palette: type-to-filter list with keyboard highlight and selection. Visuals from shadcn/ui command; cmdk-convention behavior, zero-dep.

A menu opened by right-clicking, positioned at the pointer. Port of shadcn/ui context-menu.

A modal dialog overlaying the page. Port of shadcn/ui dialog.

Provides an LTR or RTL writing direction to descendant components. Port of shadcn/ui direction.

A draggable edge panel (bottom by default) with drag-to-dismiss. Port of shadcn/ui drawer (vaul).

A menu of actions or choices triggered by a button. Port of shadcn/ui dropdown-menu.

An empty-state block with icon, title, description, and actions. Port of shadcn/ui empty.

The field family: a label + control + description + error composition helper that wires ids and aria, plus FieldGroup/FieldSet/FieldLegend/FieldContent/FieldLabel/FieldTitle/FieldSeparator for grouped and responsive layouts. Port of shadcn/ui field.

A pointer-hover card that reveals a floating preview. Port of shadcn/ui hover-card.

A native form input with theme styling. Port of shadcn/ui input.

Combines inputs, textareas, buttons, and addons into one control group. Port of shadcn/ui input-group.

A one-time-password input: a single native input overlaying slot cells. Port of shadcn/ui input-otp.

A flexible list row with media, content, actions, and separators. Port of shadcn/ui item.

Displays keyboard input or a group of keys. Port of shadcn/ui kbd.

Renders an accessible label associated with controls. Port of shadcn/ui label.

A styled marker row with icon and content parts. Port of shadcn/ui marker.

A horizontal bar of menus (like an application menu). Port of shadcn/ui menubar.

A chat message row with avatar/content/header/footer. Port of shadcn/ui message.

A scroll container for chat messages with stick-to-bottom autoscroll and a scroll-to-end button. Port of shadcn/ui message-scroller.

A non-modal menu bar of triggers and content panels. Port of shadcn/ui navigation-menu.

Pagination with page navigation, previous/next, and ellipsis. Port of shadcn/ui pagination.

Floating content anchored to a trigger. Port of shadcn/ui popover.

Displays an indicator showing completion progress of a task. Port of shadcn/ui progress.

A set of native radio buttons where only one can be selected. Port of shadcn/ui radio-group.

Resizable panel groups with draggable handles. Port of shadcn/ui resizable (react-resizable-panels).

A themed scroll container with native scrolling and a thin styled scrollbar. Port of shadcn/ui scroll-area.

A native select styled like shadcn/ui's native-select, with a themeable chevron.

Visually or semantically separates content. Port of shadcn/ui separator.

A dialog that slides in from a screen edge. Port of shadcn/ui sheet.

A composable, collapsible sidebar with a provider, frame variants, and a full menu/group part family. Port of shadcn/ui sidebar.

A placeholder to show while content is loading. Port of shadcn/ui skeleton.

A native range slider styled to match shadcn/ui slider (single thumb).

An animated loading status icon. Port of shadcn/ui spinner.

A native toggle switch styled with pure CSS. Port of shadcn/ui switch.

A responsive table built from real table elements. Port of shadcn/ui table.

A set of layered sections of content, displayed one at a time. Port of shadcn/ui tabs.

A native multi-line text input with theme styling. Port of shadcn/ui textarea.

A toaster stack + toast() function, sonner-style. Original zero-dep implementation.

A two-state button that can be on or off. Port of shadcn/ui toggle.

A set of two-state buttons with single or multiple selection. Port of shadcn/ui toggle-group.

A floating label with an anchor-pointing arrow, shown on hover/focus. Port of shadcn/ui tooltip.

Escape-key + outside-pointer dismissal with a LIFO layer stack, for dialogs, popovers, and dropdowns.

Anchored positioning for floating elements: side/align placement, viewport flip, arrow positioning, scroll/resize tracking.

Focus trap and focus restore for modal surfaces like dialogs.

Move a component subtree into another container (document.body by default) to escape overflow/transform/z-index stacking contexts.

Roving-tabindex keyboard navigation (arrow keys, Home/End, wrap) for composite widgets like tabs.

Printable-key item search for menus and listboxes, with Radix cycle-on-repeat semantics.

A reactive viewport-width signal (isMobile) matching shadcn/ui's use-mobile hook.

cn()/cv() class utilities and custom-element interop helpers.