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 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 or 2*x+1 and see them graphed in real time.

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, 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 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 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 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 scroll container that fades whichever edge still has more content to reveal, instead of cutting content off abruptly.

Scroll-triggered entrance animation driven by IntersectionObserver, with a RevealGroup for staggered cascades. Content stays visible without JS and under reduced motion.

Animates a number from a start value to its final value when scrolled into view. Screen readers always get the real value; reduced motion renders it immediately.

Text with a looping gradient shimmer sweeping across it via background-clip: text. Token-driven colors keep AA contrast; reduced motion renders static text.

Reveals text character by character, like a terminal being typed in real time. Screen readers receive the full string immediately; reduced motion renders it statically.

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.

Drag-and-drop graph editor for building typed workflows. Connects trigger, condition, action, transform, and output nodes. 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.