Components

A button that switches the site between light and dark mode, persisting the choice to localStorage and a cookie.

A clickable control that triggers an action, supporting nine visual variants and five sizes.

A single-line text input with optional label, hint, and error messaging. Supports a floating label variant where the label animates inside the field.

A one-time password input composed of individual single-character cells. Supports keyboard navigation, auto-advance, and paste.

A multi-line text input with optional label, hint, and error messaging.

A controlled radio group with accessible markup, custom visual styling, and support for hints and disabled states.

A toggle switch for boolean values, rendered as an accessible button with role="switch".

A segmented group of toggle buttons where one item (single mode) or many items (multiple mode) can be active at once.

Single-value dropdown with arrow-key navigation, typeahead, and subtle open/close animation.

Controlled or uncontrolled checkbox with optional label.

A searchable dropdown that filters options as the user types, with single-select and multi-select (pill chip) modes.

A plain text input that also handles slash-style commands: typing the trigger character (/ by default) opens a filtered, keyboard-navigable command menu; typing anything else behaves like a normal text field.

A trigger button that opens a calendar popup for selecting a single date, with full keyboard navigation, min/max bounds, and no external date library.

A styled range input for selecting a numeric value within a defined range, with optional label, hint, and current value display.

A CodeMirror-backed JSX/JavaScript editor with syntax highlighting, dark/light theming, and Tab-to-indent.

Inline label for status, category, or count.

A flexible container component for grouping related content into a distinct visual surface, composed with CardHeader, CardContent, and CardFooter.

A set of composable table subcomponents for displaying structured, tabular data with sortable columns, row striping, and hover highlights.

A set of loading placeholder components that mimic content shapes while data is being fetched.

A collapsible, keyboard-navigable tree view for hierarchical data: file trees, org charts, and nested navigation.

A vertical step list with numbered indicators and connector lines, for ordered sequences like setup guides, onboarding flows, and activity feeds.

A full-featured, column-definition driven data table with client-side sorting, row selection with indeterminate header checkbox, and pagination.

An interactive 2D function plotter with pan, zoom, and support for multiple equations. Enter expressions like x^2, sin(x), or e^x, then click a curve to select it and see its local minima/maxima plus its intersections with other curves marked as clickable points.

A compound component for cycling through a series of slides with keyboard navigation, dot indicators, and optional auto-play.

A styled code block with a copy button, and an optional tabbed Preview/Code switcher for live component examples.

Renders real LaTeX math notation via KaTeX, with graceful fallback rendering for invalid expressions and a MathML tree for screen readers.

User or entity image with graceful fallback to initials, plus an overlapping AvatarGroup with a +N overflow indicator.

A compact chip for a linked file (icon, filename, and optional size/type) with an automatic image/PDF thumbnail, plus AttachmentGroup for a wrapped row of files.

A chat-style message bubble with sent/received variants and iOS-tapback-style reactions overlapping the bubble corner, a MessageReactions max/+N overflow stack like AvatarGroup, plus a source-citation use case for LLM responses.

Force-directed node/edge graph with draggable nodes, pan/zoom, hover-highlighting, and keyboard navigation.

A full-featured audio playback bar with play/pause, seeking, skip, volume, and speed controls.

A wrapper that applies a mouse-tracking CSS 3D perspective tilt to any child element.

A thin horizontal or vertical dividing line, optionally broken up by a short text label like "OR".

Contextual feedback banner for success, warning, danger, or info.

Horizontal bar indicating task completion.

Animated loading indicator.

Ephemeral notification toasts with auto-dismiss, variants, and optional actions.

A compound component for switching between related panels of content, with a sliding active-tab indicator.

Vertical navigation sidebar with a header, footer, sections, links, event-driven buttons, dividers, and an optional collapse toggle.

A navigational landmark that shows the user's current location within a site hierarchy.

A fixed horizontal top bar composed of a brand slot and a right-aligned actions slot.

A scroll-spy navigation sidebar that scans a content container for h2/h3 headings and links to each one, bolding whichever section is currently in view.

A split-pane layout primitive: drag a handle between two panels to resize the sized one, with min/max clamping and full keyboard support. Composed from Resizable, ResizablePanel, and ResizableHandle.

A single-item show/hide component. Simpler than Accordion; use it for one expandable section like a filter panel, "show more" block, or settings group.

A compound component for showing and hiding sections of content, supporting single-item and multi-item expansion modes.

A collapsible summary of an AI assistant's tool calls, web searches, and internal "thoughts" behind a single reply: a one-line trigger ("Thought, searched the web, used 2 tools") that expands into a vertical timeline of each step. Each step is a ToolCallEntry — one thing the assistant did (ran a tool, searched the web, or reasoned out loud) — rendered as one row of that timeline.

A set of composable layout primitives for building forms: handling spacing, labeling, error display, and section grouping. Optionally pair with the useZodForm hook for Zod schema validation powered by react-hook-form.

A structured question widget for chat-style flows: a single radio, slider, number, or calendar question, or a `steps` sequence of several questions paginated inside one card with a "Question X of N" progress indicator.

A modal command palette overlay with fuzzy search, grouped results, match highlighting, keyboard navigation, and focus trap.

A small floating text label that appears next to its trigger on hover or keyboard focus. Never contains interactive content.

A click-triggered, non-modal floating panel anchored to its trigger. Focus moves in on open but is never trapped; Escape and outside clicks close it.

A trigger button that opens a floating menu of actions with arrow-key navigation, typeahead, separators, and disabled items.

A blocking overlay dialog with focus trap, scroll lock, Escape-to-close, backdrop dismissal, and focus return; composed from Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter, and ModalClose.

A blocking side-panel overlay that slides in from an edge of the screen, with the full modal accessibility contract: focus trap, scroll lock, Escape-to-close, backdrop dismissal, and focus return.

A non-modal overlay panel that slides in from an edge of the screen but floats with margin on every side: a rounded, elevated Card rather than an edge-to-edge sheet. No backdrop, no scroll lock, and no focus trap; the rest of the page stays fully visible, clickable, and interactive. Panels on the same side stack automatically: opening a second one shifts earlier ones toward the center.

A line chart for visualising trends over time, supporting multiple series.

A vertical bar chart for comparing values across categories, with optional stacking.

A filled area chart for emphasising volume and cumulative values over time.

A donut (or pie) chart for part-to-whole proportions across named slices.

A radar chart for comparing multiple entries across several shared dimensions.

A drag-and-drop grid for metric tiles. Users reposition tiles by dragging and resize them by dragging edge handles. Tile content adapts to its current size via a render prop.

A drag-and-drop Kanban board with keyboard support. Cards can be dragged between columns and reordered within columns. The card face (what gets dragged) ships a default template but can be fully replaced via renderCard. KanbanCard ships no built-in edit form: the details popup is entirely bring-your-own. Pass a renderCardDetails function to render whatever content you want inside the Modal that opens on click; omit it and the board is drag-only, no popup, no info button.

Drag-and-drop graph editor for generic input/output nodes. Select a node to edit its title, description, and ports in the side panel. Outputs a serializable WorkflowGraph via onChange.

A freehand drawing surface with pen and eraser tools, color palette, variable stroke widths, undo/redo, and PNG download.