Components

Triggers an action or event. Supports multiple variants, sizes, and semantic tones.

Groups related buttons together with optional attachment and orientation.

A primary action with related secondary actions behind a chevron, as one connected control.

A square button designed to hold a single icon, with an accessible label.

Navigation for medium-width windows: icons over labels, with an active pill behind the icon.

Layered content panels switched by tab triggers. Built on Radix UI Tabs.

Hierarchical navigation trail showing page location.

Page navigation control with prev/next and page number buttons.

Honest money: Intl formatting, tabular numerals, the currency’s minor unit and a true minus sign.

Semantic HTML table with styled variants.

Feature-rich data table with sorting and row selection powered by TanStack Table.

Placeholder UI shown when a list or page has no content.

Full-page or section error view with retry action.

A number whose digits roll to new values on the spatial spring. The first render never animates.

An amount field: locale-aware parsing as you type, grouped on blur, the currency symbol leading.

Text input field for forms. Supports size variants, icons, addons, and validation states.

A multi-line text input with configurable resize behaviour, size, and validation states.

A numeric input with increment and decrement controls, supporting min/max clamping and step.

A text input pre-wired with a search icon and a clear button for filtering content.

A password field with a built-in toggle to reveal or hide the entered value.

An accessible form label that optionally shows a required asterisk and links to an input via htmlFor.

Small supporting text placed beneath a form field to provide hints or validation feedback.

Wraps Label, Input, HelperText and FormError into a single accessible group.

Calendar date picker with text input.

Dual-calendar date range selector.

Small status indicator or label. Communicates state, category, or count.

Deprecated — use Badge. A pill indicator for status values like active, pending, error.

Interactive chip for filtering, supports selected/unselected state.

Compact label chip, optionally dismissible.

Deprecated — use Badge. Non-interactive label tag for categorisation.

A compact eyebrow label, typically used above headings.

Displays a user's profile picture with initials fallback.

Stacked group of avatars with overflow count.

Inline contextual message with optional title, icon, and dismiss action.

Deprecated — use Alert. Full-width announcement banner, typically used at the top of a page.

Deprecated — use Alert. Highlighted content block for tips, warnings, or notes.

Imperative toast notifications using the toast object. Render <Toaster /> once in your layout.

Animated loading indicator. Inherits color from context.

Placeholder loading animation that mimics content layout.

Horizontal progress bar with optional tone and animation.

Vertically stacked list of collapsible sections.

Toggle visibility of content with smooth animation.

Scrollable container with custom styled scrollbars.

Star rating input, supports controlled and read-only modes.

Range slider built on Radix UI Slider.

Pressable toggle button built on Radix UI Toggle.

Group of toggle buttons where one or many can be active.

Tab-style control for mutually exclusive selections.

Accessible dropdown select built on Radix UI. Supports groups and search.

Binary checkbox input built on Radix UI.

Group of mutually exclusive radio inputs.

A radio group where each option is a whole card: title, description and optional icon, one choice.

A checkbox drawn as a whole card: title, description and optional icon. Pick any number.

Toggle control for binary on/off settings. Built on Radix UI Switch.

Command-palette style searchable dropdown built on cmdk.

Type-to-search input with matching options dropdown.

Modal dialog built on Radix UI. Fully accessible with focus trapping and ARIA roles.

Confirmation dialog that requires an explicit user action before proceeding.

Floating content panel anchored to a trigger element.

Floating label that appears on hover. Built on Radix UI Tooltip.

Rich tooltip card revealed on hover.

Slide-in panel from any edge of the screen.

Alias for Drawer — slide-in sheet panel.

Surface container for grouping related content. Supports flat, surface, and interactive variants.

An image card with a glass caption over a soft scrim. With `href`, the whole card is one link.

Vertical stack layout with configurable gap.

Flexbox layout primitive.

CSS Grid layout primitive.

Generic container primitive with style token props.

A horizontal or vertical visual divider.

A decorative gradient-faded horizontal rule.

Semantic heading component with size, weight, and tone control.

Paragraph text component with size, tone, and weight variants.

Inline code span for technical terms and short code snippets.

Keyboard key display — renders a styled <kbd> element.

Styled anchor link with variant and external support.

Renders text with a brand gradient fill.

Animates opacity between 0 and 1 based on the `in` prop.

Slides content in from a direction based on the `in` prop.

Scales content in/out from its center.

Expands and collapses content along the block axis.

The composer for a chat: an auto-growing text field with Send, which turns into Stop while a reply streams.

One message in a conversation. User messages sit in a bubble at the end; assistant replies run full width. MessageActions adds copy, feedback and regenerate.

Assistant text as it arrives: new chunks fade in, text already shown stays still, and a caret marks the end.

Shows the assistant is working before the first token arrives: a morphing shape and a shimmering label.

Numbered source markers for running text, with a hover preview, plus SourceChip and SourceList for the sources under a reply.