Every Clay component.
73 primitives, grouped by intent. Each page renders live demos against the active theme, switch themes from the header and the gallery follows.
Brika Logo
Brika brand mark, three stacked bricks. Uses currentColor.
Button
The default action affordance, a themed wrapper over the native button with CVA variants and asChild slot projection.
Button Group
Visually-joined cluster of buttons sharing borders.
Clay Logo
Clay brand mark, three rounded tiles in an optional badge. Tiles use currentColor; badge bg overridable via --clay-logo-bg.
Icon
Thin wrapper around lucide-react icons that maps a tone prop to Clay's semantic icon-color tokens.
Kbd
Inline keyboard-shortcut hint rendered as a small monospace pill.
Calendar
An accessible date picker calendar supporting single, range, and multiple selection modes.
Checkbox
Binary toggle with checked / unchecked / indeterminate states. Built on Radix Checkbox.
Color Picker
Designer-grade color picker. Saturation × value pad, hue slider, alpha track with checkerboard, format tabs for hex, rgb, and hsl, one-click pills for `currentColor`, `transparent`, and `inherit`, recent-colors strip, and live WCAG contrast badges. Controlled. Emits a CSS color string: `#rrggbb`, `#rrggbbaa`, or one of the special keywords.
Combobox
Typeahead-search select that pairs a Popover trigger with a Command palette listbox.
Date Picker
Trigger button that opens a popover-anchored calendar for picking a single date or a date range.
Dropzone
A drag-and-drop file surface that also opens the native picker on click, with a dashed border that highlights while a file is dragged over it.
Field
Form-field layout primitive. Standardises the label + control + description + error stack with consistent spacing and ARIA wiring.
File Upload
A button-triggered file picker paired with a list of selected files, each showing its name, size, upload progress, and a remove control.
Input
A themed single-line text input. Thin wrapper over the native input with tokenised styling, focus ring, and aria-invalid handling.
Input Group
Compose an Input with adornments, addon icons, trailing buttons, prefix labels.
Input OTP
An accessible one-time password input with individual character slots and paste support.
Label
Accessible form label. Wraps Radix Label primitive with tokenised typography.
Mini Calendar
A compact horizontal strip of selectable days with previous/next navigation, ideal as a space-efficient date picker for toolbars, popovers, and inline forms.
Password Input
Input variant for password entry with an eye toggle to reveal characters.
Radio Group
A set of mutually exclusive radio buttons where only one can be selected at a time.
Select
Dropdown selection menu. Wraps Radix Select with tokenised styling.
Slider
Single-thumb numeric range track. Optional tick dots and labels mark `step` increments, custom intervals, or preset positions. Pair with `<SliderValue>` when you need a numeric readout.
Switch
Two-state toggle. Use for on/off settings; prefer Checkbox for multi-select forms.
Textarea
Multi-line text input. Auto-resizes if you let it, or clamp via `rows`.
Toggle
A two-state button that can be toggled on or off, useful for formatting toolbars.
Toggle Group
A group of two-state buttons that share variant and size context.
Alert Dialog
Confirmation dialog with destructive intent. Blocks interaction until resolved.
Cropper
A composable image-crop primitive. The Cropper root manages pan/zoom/rotation state in context; CropperCanvas renders the interactive canvas; CropperOverlay draws the crop mask. The consumer wires their own Dialog, Slider, and Buttons around it.
Dialog
Modal dialog. Use for confirmations, forms, and focused tasks.
Drawer
A bottom-sheet dialog that slides up from the bottom of the screen, great for mobile-first interactions.
Dropdown Menu
Floating menu attached to a button trigger.
Hover Card
A floating card that appears on hover, useful for previewing linked content.
Popover
Floating panel anchored to a trigger. Use for menus, info panels, mini-forms.
Sheet
Side-anchored panel. Use for navigation, filters, or lightweight detail views.
Tooltip
Hovered or focused text overlay. Wrap roots in `<TooltipProvider>`.
Breadcrumb
Hierarchical location indicator with separators.
Command
A fast, composable command palette with fuzzy search, ideal for keyboard-driven power users.
Context Menu
Displays a menu to the user, opened on right-click or a long press.
Menubar
A horizontal menu bar offering access to application commands via dropdown menus.
Navigation Menu
A collection of links for site navigation, with optional flyout panels.
Pagination
Page navigation control with previous/next arrows, numbered page links, and ellipsis truncation.
Sidebar
App shell sidebar with collapse-to-rail behaviour. Composable navigation.
Tabs
Tabbed navigation between related views.
Alert
Banner-style message for status, errors, and notices. Compose <Alert> with <AlertTitle> + <AlertDescription> and optionally <AlertIcon>.
Badge
Small status descriptor. Use for tags, counts, and inline status.
Empty State
Friendly placeholder for empty lists or zero-results states.
Progress
Linear determinate progress bar. Pass `value` 0 to 100.
Progress Display
Composite progress affordance with label, percentage, and bar.
Skeleton
Loading placeholder with subtle shimmer. Match the rough size of incoming content.
Spinner
Inline loading indicator that wraps a spinning lucide icon and inherits the surrounding text color.
Status
A compact pill that pairs a colored, optionally pulsing dot with a label. Choose a semantic tone (success, warning, info, destructive, or neutral) and supply your own text.
Toast
Transient notification surface built on Sonner. Mount one <Toaster /> near the app root, then push notifications anywhere with the imperative toast() API.
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Aspect Ratio
Displays content within a desired ratio, useful for responsive images, videos, and embeds.
Card
A surface container that groups related content and actions. Header / title / description / content / footer subcomponents.
Carousel
A touch-friendly, accessible slideshow for cycling through items, powered by Embla.
Collapsible
Two-state container that hides or reveals content. Use for FAQs, accordions.
Page Header
Standard page title block with optional description, count, and action slots.
Resizable
Drag-to-resize panel groups for building split-pane layouts, powered by react-resizable-panels.
Scroll Area
Container with custom scrollbars. Use to constrain a tall list inside a card.
Section
Standard section block, heading, description, and content area.
Section Label
Small uppercase label that introduces a content block.
Separator
Visual or semantic divider between content sections.
Avatar
User avatar with image, fallback initials, and status badge.
Chart
Recharts wrapper that consumes the theme `--data-*` palette.
Code Block
Syntax-highlighted code with a copy button and optional line numbers. Switch between multiple files via a header tab bar or a dropdown (each with optional file-type icons), or drop the header entirely. Powered by Shiki.
Data Table
Headless TanStack Table v8 wrapped around Clay's `Table` primitives, with sortable headers, optional row selection, and pagination out of the box.
Image
Compound image component with a skeleton pulse while loading and an `ImageFallback` slot rendered when the source fails, times out, or is absent. A hanging image host still shows the fallback once `timeoutMs` elapses.
Overflow List
List that adapts to available width by collapsing overflow into a "+N more" indicator.
Rating
Star rating that works as both a fractional display and an interactive input. Fractional values (e.g. 3.75) render partial stars with no rounding. Provide `onValueChange` or `defaultValue` to switch to interactive input mode.
Table
Structured tabular data. Compose with TableHeader, TableBody, TableRow, TableCell.
Tree
A hierarchical list for browsing nested data such as file systems, with expandable folders, optional guide lines, lazy-loaded children, and single or multi selection.