Component specification index
Components
All 48 components are free and open source — each with a live demo, full prop reference, and behavior notes. Every one reads exclusively from the token contract; no component ships a hardcoded color.
Inputs
A native button with three visual weights. Forwards its ref and spreads every standard button attribute, so it drops into forms, dialogs, and toolbars without a wrapper.
A styled text input with a built-in invalid state.
A multi-line text field matching Input's styling and invalid-state contract.
A native <select> with a themed chevron affordance layered on top — no custom listbox to keep in sync with platform behavior.
A checkbox built on a visually-hidden native input, so it keeps full native form semantics while the visible box is styled from tokens.
A radio input using the same hidden-input pattern as Checkbox. Group multiple with a shared name.
A toggle switch — a native checkbox with role="switch" under the hood, so assistive tech announces it correctly while behaving like any controlled checkbox.
A form label with an optional required marker, meant to pair with Input, Select, Textarea, Checkbox, Radio, or Switch.
A text input for numeric values with increment/decrement stepper buttons, min/max/step clamping, and full keyboard support.
A draggable, keyboard-navigable slider. Pass a two-element tuple as the value to get a range slider with two thumbs instead of one.
A star rating input built on native radio buttons, plus a read-only display mode for showing an average rating.
A typeahead search-and-select input built on Floating UI, supporting single selection or multi-select with removable chips.
A drag-and-drop file upload queue with per-file progress, client-side validation, and a remove action — the upload mechanism itself is entirely up to you.
Canvas-based signature capture with smooth freehand strokes, DPR-correct rendering, and export to a PNG data URL.
A contentEditable rich text editor with a formatting toolbar, tables, images, text color/highlight/font-size, Notion-style markdown shortcuts, and a slash command menu — all sanitized through the same DOMPurify allowlist on every emitted change.
Layout
Overlays
A hover/focus-triggered label for a single trigger element, positioned with Floating UI and rendered through a portal so it never clips inside scroll containers.
A click-triggered panel anchored to a trigger element — for richer content than a Tooltip supports.
A focus-trapped, scroll-locking dialog. Fully controlled — there's no uncontrolled mode, so visibility always lives in your state.
A slide-in panel anchored to a viewport edge — same focus-trapped, scroll-locking interaction as Modal, animated in from the side instead of appearing centered.
A click-triggered action menu with full arrow-key navigation, built as a compound component around a trigger element.
A Cmd+K style global command launcher — a centered search input over a filtered, keyboard-navigable, optionally grouped and virtualized list of commands.
Navigation
A trail of ancestor links with an automatic current-page state on the final item.
A fully controlled page picker with sibling-based ellipsis collapsing for large page counts.
A compound tabs component with full roving-tabindex keyboard navigation. Inactive panels unmount, unlike Accordion.
A compound expand/collapse group supporting single or multiple open sections. Panels stay mounted and are hidden with CSS, so transitions are simple to add.
Feedback
A small status or count indicator.
A user avatar that falls back to initials on missing or broken image URLs, with an optional presence dot.
A determinate or indeterminate progress bar.
A loading indicator with a screen-reader announced label.
Content-shaped loading placeholders — text lines, circles, or rectangular blocks — plus a SkeletonWrapper for toggling between a skeleton and real content.
An inline, non-dismissing-by-default banner for page-level or form-level messages.
A provider-driven notification system — wrap your app once, then call the useToast() hook from anywhere.
Data
A virtualized, sortable, filterable, resizable data table — the most involved component in the library, and the one built for real production datasets rather than demo lists.
A virtualized, keyboard-navigable tree with optional cascading checkbox selection and lazy-loaded children — the hierarchical counterpart to DataGrid, reusing its exact scrollTop virtualization math against a flattened, expansion-aware node list.
A visual rule/condition builder — field, operator, value rows, groupable via AND/OR with nesting — the kind of filter UI Kendo/Syncfusion sell as a premium add-on.
A columns-of-cards board with pointer drag-and-drop (reorder within a column, move across columns, reorder columns) and a required keyboard alternative — built on the exact same Pointer Events technique as Scheduler's drag-to-reschedule, not a second drag mechanism.
A node/edge graph renderer for flowcharts, org charts, and dependency graphs — a static server-safe SVG for previews, or a pan/zoom/editable InteractiveDiagram for exploring and building the graph interactively.
Date & time
A single date grid with full keyboard navigation and locale-aware formatting — the primitive underneath DatePicker and DateRangePicker.
A text input plus calendar popover for a single date, with locale-aware typed-input parsing.
Two linked date inputs plus a shaded range Calendar — for booking windows, report ranges, and similar.
A week-view calendar grid with automatic overlap layout, drag-to-move, drag-to-resize, and full keyboard equivalents — for booking systems, shift schedules, and meeting planners.
Charts
A line chart with a static, zero-JS server component and a separate client component for hover tooltips and a toggleable legend — pick whichever your page actually needs.
A grouped or stacked bar chart, following the same static/interactive split as LineChart — with per-bar hover instead of a continuous tooltip, since bars are discrete.
A filled-region chart reusing LineChart's scale, axis, and hover-tooltip logic almost entirely — the same static/interactive split, plus overlapping or stacked fills.
A pie or donut chart with per-slice hover emphasis and a legend that redistributes percentages when a slice is hidden — a standalone chart with no x/y scales, unlike Line/Bar/AreaChart.