Component docs

Renders body text with consistent size, weight, and tone.

Titles a section with a semantic heading level.

Sets apart a quotation as a distinct block.

Marks inline code or a short command within running text.

Marks a keyboard key or shortcut.

Navigates to another page or resource.

Collects short-form text from a user.

Collects multi-line text from a user.

Collects a number with steppers, keyboard control, clamping, and Intl formatting.

A password field with a reveal toggle, focus return, and reset-on-submit.

A search field with a leading icon, clear button, and optional debounced changes.

A text field preset for email, URL, or telephone — sets type, inputMode, and autocomplete.

Collects an international phone number with a country selector and live formatting.

Collects a one-time passcode across discrete, auto-advancing slots.

Edits text in place: a preview that swaps to an input on activation.

A Tiptap-backed rich text editor with a composable toolbar, bubble menu, and character counter.

Toggles a binary option in a form or settings surface.

Selects one option from a related set of choices.

Toggles a setting on or off.

A two-state button for inline preferences and toolbar controls.

Lets a user choose one option from a native menu.

Selects a value from a searchable list in a popover.

Collects multiple values as removable Tag chips with keyboard and paste entry.

Selects a numeric value or range along a track.

Collects or displays a star rating with radio-group semantics.

Picks a color via a saturation area, hue/alpha sliders, hex input, and swatches.

Displays a month grid for selecting a single date or a range.

Pairs a typed date field with a calendar popover.

Collects a date, time, or date-and-time as locale-aware masked text.

Selects a time of day with hour, minute, and AM/PM selects.

Triggers an action or submits a form.

Copies a value to the clipboard with a transient confirmation state.

Accepts files via drag-and-drop or browsing, with validation and a removable list.

Wires react-hook-form fields to accessible labels, descriptions, and errors.

Associates text with a form control.

Renders sortable, paginated tabular data with TanStack Table.

Extends the data table with expandable detail rows, frozen columns, and a sticky header, plus a headless useDataTable hook.

Presents label/value pairs as an aligned definition list.

Presents rows and columns of data in an accessible HTML table.

Navigates hierarchical items with expand/collapse, single or multiple selection, typeahead, and full keyboard support.

Renders only the visible window of a large list, keeping the DOM small for huge backlogs. Supports variable item heights and horizontal orientation.

Reorders a list by dragging, with keyboard and pointer support. Controlled and headless — compose it into reorderable lists, sortable rows, or multi-column boards.

A theming contract for charts; bring your own recharts.

Draws a compact inline-SVG trend line with no charting dependency; tints follow the tone and color mode.

Plots a labeled matrix of color-coded cells with sequential or diverging ramps that follow the theme and color mode.

Renders a scannable QR code, optionally with a center logo.

Represents a user or entity with an image, initials, or fallback content.

Displays compact, non-interactive status or metadata. For actionable or removable labels, use Tag.

Groups related content and actions on a single bordered surface.

An interactive chip — clickable, removable, with optional avatar, icon, or count. Use over Badge when the label is actionable.

Displays a KPI read-out with label, value, toned delta, and a trend slot.

Lists chronological events along a rail of toned dots and connectors.

Communicates an empty view with an icon, message, and next-step actions.

Swaps between two elements in place with a fade, rotate, flip, or scale transition. Presentational — pair with the control that owns the state.

Shows the path to the current page as a navigable trail.

Presents site navigation with links and rich dropdown panels.

Navigates between pages of a large, split data set.

Provides a collapsible, keyboard-toggled application sidebar.

Shows progress through a multi-step flow with numbered, stateful indicators.

Organizes related content into selectable panels.

Groups related controls in a single keyboard-navigable bar.

Provides a searchable, keyboard-driven command palette.

Reveals a menu of actions on right-click or long-press.

Displays a keyboard-accessible menu of actions from a trigger.

Provides a persistent menu surface for top-level application commands.

Displays modal content in a focus-trapped overlay.

Interrupts with a modal that requires an explicit confirm or cancel.

A touch-first gesture sheet (Vaul) with drag-to-dismiss physics, openable from any edge via `direction`. Use over Sheet when the surface should answer to swipe gestures — typically mobile.

Slides a panel in from a screen edge for secondary content or forms. Dialog semantics, pointer-agnostic — use Drawer for a gesture-driven mobile sheet.

Displays interactive floating content from a trigger.

Previews rich content when a link or control is hovered or focused.

Provides supplemental context when a control is hovered or focused.

Guides users through the UI by spotlighting targets with a step card.

Surfaces an inline, persistent status message.

Shows the completion progress of a task.

Reserves layout space with a shimmering placeholder while content loads.

Indicates an indeterminate loading state with an accessible label.

Surfaces transient notifications via a Sonner-backed toaster region.

Reveals related content in vertically stacked, expandable sections.

Toggles the visibility of a single content region.

Constrains content to a fixed width-to-height ratio.

Cycles through slides of content with prev/next controls.

Splits a layout into panels a user can resize by dragging.

Adds a styled, cross-browser scroll viewport with custom scrollbars.

Divides content with a horizontal or vertical rule.