Components
Every component in the Hex UI registry, grouped by category. Click any card to see usage, props, and AI-ready metadata.
Primitives
- Aspect RatioConstrain children to a specific width-to-height ratio (e.g. 16/9 for video, 1/1 for square).
- AvatarA user profile image with a fallback (usually initials) rendered when the image is missing or fails to load. Built on Radix UI Avatar — AvatarFallback accepts a delayMs prop to avoid flashing during fast loads.
- BadgeA small status indicator with multiple style variants. Used for tags, statuses, and categorization.
- ButtonA versatile button component with multiple variants, sizes, and states. Supports icons, loading state, and composition via asChild.
- CheckboxAn accessible checkbox with checked, unchecked, and indeterminate states. Built on Radix UI.
- ClusterHorizontal flex flow with wrap and token-bound gap. Use for tag lists, button rows, breadcrumbs, and any group of equally-weighted inline items.
- ContainerCentered max-width wrapper that constrains content to readable widths. Sizes map to `--container-*` prose-width tokens; padding maps to `--space-*`.
- GridCSS grid with column-count presets and token-bound gap. Pass `cols="auto-fit"` + `minColWidth` for responsive grids without media queries.
- InputA styled text input with smooth focus transitions, shadow effects, and full HTML input compatibility.
- LabelAn accessible label component built on Radix UI Label primitive. Associates with form controls via htmlFor.
- ProgressA horizontal progress bar showing completion from 0 to 100%. Built on Radix UI Progress.
- Radio GroupA set of mutually exclusive radio options. Built on Radix UI RadioGroup with roving focus and arrow-key navigation.
- Scroll AreaA scrollable region with custom-styled scrollbars that match the design system. Content must be explicitly sized.
- SelectAn accessible dropdown select for choosing one option from a list. Built on Radix UI Select with full keyboard navigation, typeahead, and RTL support.
- SeparatorA visual divider between content sections with horizontal or vertical orientation.
- SkeletonA pulsing placeholder shown while content is loading. Pair with explicit dimensions.
- SliderA range input with draggable thumbs. Supports single value, ranges (two thumbs), custom steps, and full keyboard control.
- SpacerDeclarative whitespace block bound to `--space-*` tokens. Use when sibling spacing can't come from a parent's `gap`.
- StackVertical flex flow with token-bound gap. The headless equivalent of `<div className="flex flex-col gap-X">` with consistent spacing scale.
- SwitchAn accessible toggle switch for instant on/off settings. Built on Radix UI.
- TextareaA styled multi-line text input with smooth focus transitions and shadow effects.
- ToggleA two-state button that stays pressed when toggled on. Used for formatting toolbars (bold/italic) or option toggles.
- Toggle GroupA set of toggles where one or multiple can be pressed. Inherits Toggle's variant/size via context. Useful for alignment/formatting toolbars.
Components
- AccordionA vertically stacked set of collapsible content sections. Built on Radix UI Accordion.
- AlertAn inline notification banner for important messages. Supports default and destructive variants with optional leading icon.
- Alert DialogA modal dialog for destructive confirmations. The user must explicitly accept or cancel — there is no close button. Built on Radix UI AlertDialog.
- BreadcrumbA path trail showing the user's location within a hierarchy, with links back to ancestors and a non-interactive current page.
- CalendarDate grid built on react-day-picker v9. Supports single, multiple, and range selection modes. Keyboard navigable and localizable.
- CardA container component with header, content, and footer sections. Includes subtle shadow and hover effects.
- CollapsibleA single section that can be expanded or collapsed. For multiple independent sections use Accordion with type='multiple'.
- Color PickerHSL-native color picker that edits an HSL triplet directly via three sliders (H/S/L). Hex input is a display adapter; sliders are the source of truth so the value round-trips losslessly through the `@hex-core/tokens` triplet format.
- ComboboxSearchable single-select input. Composes Popover + Command (cmdk) + a styled trigger. Pass a list of { value, label } options.
- CommandComposable command menu built on cmdk — search input + filtered list with keyboard navigation. Use as an inline palette or, wrapped in CommandDialog, as a ⌘K-style launcher.
- Context MenuRight-click (or long-press on touch) menu anchored to the trigger region. Same item vocabulary as DropdownMenu.
- Data TableGeneric data-driven table built on TanStack Table + Hex UI Table primitives. Pass columns + data; add sorting/filtering/pagination via TanStack hooks.
- Date PickerDate input composed from Popover + Calendar. Shows the selected date formatted via date-fns, opens a calendar grid on click.
- DialogA modal dialog that interrupts the user with important content. Built on Radix UI with focus trap, escape handling, and scroll lock.
- DrawerBottom-sheet drawer built on vaul. Mobile-native feel: drag-to-dismiss, snap points, body-scale-on-open. Use for quick mobile actions, filters, pickers.
- Dropdown MenuA menu of actions displayed to the user when a trigger is activated. Supports items, checkboxes, radio groups, sub-menus, and keyboard shortcuts.
- DropzoneDrag-and-drop file input built on the native HTML5 drag-drop API plus a visually-hidden <input type='file'> for keyboard + screen-reader access. Filters by accept/maxSize/maxFiles before emitting.
- File TreeHierarchical tree view for files, folders, and any nested navigation. Implements the WAI-ARIA tree pattern with role='tree' / 'treeitem' / 'group', aria-level, aria-expanded, aria-selected, and full keyboard navigation (Up/Down/Left/Right/Home/End/Enter/Space).
- FormA form primitive built on react-hook-form + zod. Provides Form/FormField/FormItem/FormLabel/FormControl/FormDescription/FormMessage with automatic aria wiring and error display.
- Hover CardRich floating content revealed on hover or focus. Use when Tooltip is too small and Popover requires a click.
- Input OTPOne-time-password / verification-code entry built on the input-otp library. Renders N character slots with active/caret state and auto-advance on type.
- MenubarDesktop-app style menu bar (File / Edit / View). Horizontal menu strip with nested dropdowns.
- MultiComboboxSearchable multi-select input. Composes Popover + Command (cmdk) + a styled trigger. Trigger shows '{n} selected'; each option exposes aria-selected.
- Navigation MenuWebsite-style mega-menu with hover-triggered content panels. Used for marketing/site navigation headers.
- PaginationComposable pagination controls (Pagination / PaginationContent / PaginationItem / PaginationLink / PaginationPrevious / PaginationNext / PaginationEllipsis). Link-based by default — pair with client-side navigation or server params.
- PopoverFloating content anchored to a trigger element. Non-modal by default — clicks outside dismiss it. Use for inline forms, info, or quick actions.
- ResizableDraggable split panes built on react-resizable-panels v4. Horizontal or vertical, with keyboard-accessible handles and persistable layout.
- SheetSide drawer built on Radix Dialog with a directional slide animation. Use for navigation, filters, quick edit, or any off-canvas panel.
- SidebarApp-shell sidebar with collapsible width, context-driven open state, and composable Header/Content/Footer/Item parts. Provider-based so any descendant can toggle it.
- Sonner (Toast)Ephemeral toast notifications via Sonner. Render <Toaster /> once at app root, then call toast() anywhere.
- StepperLinear progress indicator for multi-step flows (form wizards, onboarding, checkout). Pure semantic <ol>/<li> with aria-current='step' on the active step and a per-step error status override.
- TableStyled HTML table primitives (Table / TableHeader / TableBody / TableRow / TableHead / TableCell / TableCaption / TableFooter). Low-level building blocks — use DataTable for sorting/filtering/pagination.
- TabsA tabbed interface with accessible keyboard navigation. Built on Radix UI Tabs.
- Time PickerTime input — styled wrapper around the native <input type='time'>. Value is a 'HH:MM' (or 'HH:MM:SS' with step=1) string. The browser provides 12/24-hour locale handling, keyboard arrow spinning, and screen-reader announcement.
- TimelineVertical chronological event feed for activity logs, audit trails, release notes, and notification streams. Pure semantic <ol>/<li> with a status-colored indicator and an optional icon override.
- TooltipA small floating label that reveals on hover or focus. Wrap your app in TooltipProvider, then use Tooltip/TooltipTrigger/TooltipContent per tooltip.