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-*`.
- EmptyA zero-state surface for lists, dashboards, and search results with no content. Explains why the slot is empty + provides a call-to-action.
- ErrorStateA surface for failed-fetch / failed-action states. Visually mirrors Empty but with destructive bias and an optional retry button. Mounts with role='alert' so screen readers announce on first render.
- 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.
- LoadingA composed loading-placeholder pattern for lists, cards, and stacks. Skeleton is the atom; Loading is the canonical molecule most surfaces want.
- 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.
- TagInteractive tag / chip primitive — Badge with an optional dismiss button. Mirrors Badge's variants so the visual sibling is obvious; ships with a close affordance for filter pills, multi-select selections, draft attachments.
- 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 Core 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.
- ToolbarA horizontal or vertical group of related controls (buttons, toggles, links, separators) with arrow-key roving focus. Wraps Radix Toolbar so the keyboard semantics are correct out of the box.
- TooltipA small floating label that reveals on hover or focus. Wrap your app in TooltipProvider, then use Tooltip/TooltipTrigger/TooltipContent per tooltip.
- TreeGeneric hierarchical list with roving-tabindex keyboard navigation. Distinct from FileTree (which adds folder/file icon-by-extension logic) — Tree is content-agnostic for org charts, taxonomy pickers, navigation trees.
Blocks
- AppDataTablePage-level data-table view: a header row (title + description and a toolbar), a bordered table surface, and an optional footer for pagination. Layout only — supply the actual table as children. Presentational and theme-driven.
- AppSettingsSettings page layout: a stack of groups, each pairing a title + description column with a card of form controls (two columns on ≥lg, stacked below). Presentational and theme-driven — pass your own fields and submit handling.
- AppShellApplication layout frame: a fixed left sidebar on ≥lg, a sticky top bar, and a scrollable main region. On mobile the sidebar collapses behind a menu button and slides in as an overlay drawer. Client Component. Theme-driven.
- AppSidebarNavSidebar navigation for AppShell: a pinned brand, a scrollable list of grouped links with active states and aria-current, and a pinned footer (account / sign-out). Presentational and theme-driven.
- AppStatsA row of KPI stat cards: label, value, and an optional colored delta with a directional caret (increase / decrease / neutral). Two, three, or four columns. Presentational and theme-driven.
- AuthForgotPasswordSingle-field 'forgot password' page. On submit, dispatches a reset link via adapter.requestPasswordReset and swaps to an Empty-based 'check your inbox' confirmation state.
- AuthResetPassword'Set a new password' page paired with a reset link. Two fields (new password + confirm) with manual confirm-match validation; the opaque token is forwarded verbatim to adapter.resetPassword.
- AuthSignInSplitSplit-screen sign-in page. Marketing panel on the left (≥lg), credential form on the right. Routes every credential / OAuth call through a consumer-supplied AuthAdapter.
- AuthSignUpCardCentered-card sign-up page. Email + password (with confirm) + optional name + terms checkbox + optional social providers. Routes account creation through a consumer-supplied AuthAdapter.
- AuthVerifyEmailTransactional 'verify your email' page composed from the Empty primitive. Optional resend button calls adapter.resendMagicLink with a client-side cooldown timer; resend hides automatically when the adapter doesn't implement the method.
- AuthVerifyOtpOne-time-code verification page. Renders an InputOTP of N slots and auto-submits when the code is full; routes verification through adapter.verifyOtp({ code, intent }). Optional resend button calls adapter.resendOtp.
- CommerceCartShopping cart layout: a list of line items on the left and a sticky order summary on the right (stacked on mobile). Presentational and theme-driven — pass quantity steppers / remove buttons as per-item controls and the totals as summary.
- CommerceCheckoutCheckout layout: the form on the left and a sticky order summary on the right (stacked on mobile). Layout only — supply the form (contact, shipping, payment) as children and the order review as summary. Presentational and theme-driven.
- CommerceProductDetailProduct detail layout: imagery on the left, product info on the right (name, price, description, option controls, and add-to-cart actions), stacked on mobile. Presentational and theme-driven.
- CommerceProductGridA responsive product grid: an optional heading above a grid of product cards (image, name, optional meta, price). Cards link to a detail page when href is set. Presentational and theme-driven.
- CommerceReviewsA product reviews section: a summary header (average rating + count) above a list of individual reviews, each with a star rating, author, optional date, and body. Presentational and theme-driven.
- MarketingCtaA closing call-to-action band. 'simple' reads as centered copy on the page background; 'panel' lifts it into a primary-filled rounded card. Presentational and theme-driven.
- MarketingFeatureGridA marketing feature grid: an optional heading block above a responsive grid of icon + title + description cells. Two- or three-column on desktop. Presentational and theme-driven.
- MarketingFooterA marketing site footer: a brand block, several columns of links, and a bottom bar with social links and a copyright line. Presentational and theme-driven.
- MarketingHeaderA marketing site header: brand mark, inline primary nav on desktop, and a collapsible panel on mobile. Client Component (owns the open/close state). Theme-driven.
- MarketingHeroTop-of-page marketing hero. Eyebrow, headline, subcopy, CTA buttons, and an optional media slot. Centered single-column or split copy + media layout. Presentational and fully theme-driven.
- MarketingLogoCloudA row of customer / partner logos with an optional caption. Each logo is a caller-supplied ReactNode (img, inline SVG, or wordmark) — no image source is bundled. Presentational and theme-driven.
- MarketingPricingA pricing section: an optional heading block above a row of plan cards, with one tier highlightable as recommended. Each tier has a name, price, feature list, and a caller-supplied CTA. Presentational and theme-driven.
- MarketingTestimonialA testimonials section. 'single' features one large centered quote; 'grid' lays out several quote cards with author + avatar. Presentational and theme-driven.
Verified against @hex-core/components@1.12.0 · @hex-core/tokens@1.3.6 · @hex-core/themes@0.2.2 · @hex-core/registry@0.5.1 · @hex-core/payload@0.3.0