Docs

Utility functions including cn() for merging class names.

Copy text to the clipboard and track a temporary copied state.

Detect whether the viewport is narrower than the mobile breakpoint.

Organize content into expandable sections with triggers and panels.

Display a message with a title, description, optional action, and status variant.

Ask for confirmation in a modal dialog with action and cancel controls.

Keep content within a container at a specified width-to-height ratio.

Display a user image with a fallback, badge, or grouped avatars.

Show a compact label with a choice of visual variants.

Show a navigation trail with links, separators, and the current page.

Trigger an action with configurable visual and size variants.

Group related buttons and labels with optional separators.

Select dates in a calendar with customizable day rendering.

Compose a content container with header, title, description, action, body, and footer.

Present a scrollable sequence of items with previous and next controls.

Wrap Recharts charts with configured colors, tooltips, and legends.

Select or clear an individual option with a checkbox.

Reveal or hide content using a trigger.

Choose a hexadecimal color using a picker, text input, or swatches, with optional alpha.

Compose searchable selection controls with lists, groups, and chips.

Build a searchable command list or command dialog with grouped actions.

Show a menu of actions, choices, and submenus from a context trigger.

Copy a string to the clipboard and briefly show a confirmation icon.

Select one option from searchable data, with grouping, loading, and optional responsive drawer presentation.

Select multiple options from searchable data, with selection badges, grouping, and loading support.

Render typed data and column definitions with optional pagination, row selection, and column resizing.

Choose a date from a calendar, optionally including time and accepting Date or string values.

Choose a start and end date from a calendar, optionally including times.

Provide comfortable or compact density to a subtree and toggle between the two.

Present content in a modal dialog with trigger, close control, header, and footer.

Provide and read text direction for a component subtree.

Present content in a drawer with overlay, trigger, and close controls.

Show actions, checkboxes, radio choices, and submenus in a dropdown.

Compose an empty state with media, title, description, and supporting content.

Arrange form controls with labels, descriptions, errors, and grouped fieldsets.

Show supplementary content in a card when interacting with a trigger.

Enter a value in a styled HTML input.

Combine an input or textarea with addons, buttons, and text.

Enter a one-time code in grouped slots with optional separators.

Compose a list item with media, content, actions, header, and footer.

Inspect JSON objects in an expandable tree with optional line numbers, truncation, and copy controls.

Display keyboard keys and groups of shortcuts.

Associate a styled label with a form control.

Compose a horizontal menu bar with actions, choices, and submenus.

Choose an option using a styled native select with option groups.

Compose site navigation with links, triggers, and expandable content.

Compose page navigation links with previous, next, and ellipsis controls.

Display anchored content with an optional title and description.

Show the completion of a task as a progress bar.

Choose one option from a group of radio buttons.

Arrange panels with draggable handles for resizing.

Contain overflowing content with styled scrollbars.

Choose one option from a dropdown list with groups and labels.

Visually divide content horizontally or vertically.

Present content in a panel that slides in over the page.

Compose a responsive application sidebar with navigation groups, menus, and controls.

Show a placeholder surface while content is loading.

Select a value or range using draggable slider thumbs.

Render Sonner toast notifications using the current theme.

Show a rotating indicator for an ongoing operation.

Turn a setting on or off with a switch.

Compose a table with headers, rows, cells, footer, and caption.

Switch between panels using a list of tab triggers.

Enter multiline text in a styled textarea.

Provide light and dark theme settings and a toggle using next-themes.

Choose a time with configurable units, steps, bounds, and optional meridiem.

Arrange dated events vertically or horizontally with titles and descriptions.

Switch a single button between pressed and unpressed states.

Select one or more toggle buttons in a group.

Show brief contextual content anchored to a trigger.

Install the canonical Kaotypr tokens, variants, density rules, and skeleton animation once before adding components.