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.

Triggers an action or submits a form.

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

Toggles a binary option in a form or settings surface.

Selects a value from a searchable list in a popover.

Pairs a typed date field with a calendar popover.

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

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

Collects short-form text from a user.

Associates text with a form control.

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

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

Selects one option from a related set of choices.

Lets a user choose one option from a native menu.

Selects a numeric value or range along a track.

Toggles a setting on or off.

Collects multi-line text from a user.

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

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

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

Displays compact status or metadata.

Groups related content and actions on a single bordered surface.

Presents label/value pairs as an aligned definition list.

Renders sortable, paginated tabular data with TanStack Table.

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

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

Labels content with a compact, optionally interactive chip.

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.

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

Displays modal content in a focus-trapped overlay.

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

Displays interactive floating content from a trigger.

Slides a panel in from a screen edge for secondary content or forms.

Provides supplemental context when a control is hovered or focused.

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.

Presents site navigation with links and rich dropdown panels.

Organizes related content into selectable panels.

Reveals related content in vertically stacked, expandable sections.

Toggles the visibility of a single content region.