Components

A clickable control that triggers an action, supporting six visual variants and three sizes.

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

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.

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 single component that renders the full typographic scale — headings, body text, code, blockquote, and muted variants — using semantic design tokens.

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 compound component for switching between related panels of content, with a sliding active-tab indicator.

Vertical navigation sidebar with sections, links, and dividers.

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

A set of composable layout primitives for building forms — handling spacing, labeling, error display, and section grouping without owning form state.

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

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

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 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 freehand drawing surface with pen and eraser tools, color palette, variable stroke widths, undo/redo, and PNG download.