Components

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.

A segmented one-time-code input — one box per character, auto-advancing focus as you type, with full paste support for codes copied from SMS/email.

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.

A full color picker — saturation/lightness gradient, hue strip, preset swatches, and a format-aware text input — for theme customization and design-tool UIs.

A contentEditable text input that opens a filtered autocomplete dropdown on "@" (or any trigger character) for tagging users/entities, inserting them as distinct non-editable chips.

A draggable, resizable crop rectangle over a source image, with an imperative ref handle that exports the crop at the image's native resolution — not its on-screen display size.

Chip input with typeahead suggestions, paste-splitting, validation and keyboard editing.

Dual listbox for moving items between “available” and “selected”, with search, grouping and bulk actions.

A surface container with a configurable elevation, used to group related content.

A flexbox layout primitive for spacing children consistently — the workhorse for arranging every other component.

A visual separator for horizontal or vertical layouts.

A resizable panel layout — two or more panels divided by a draggable divider, built on the same Pointer Events technique as Scheduler/KanbanBoard's drag, adapted to one-dimensional resize.

A tile grid for dashboards. Tiles drag and resize, push each other out of the way, and float back up to close gaps.

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.

A spotlight onboarding tour. Each step highlights an element and shows a floating card with Back / Next / Skip.

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 single-slide-per-view carousel with prev/next arrows and dot indicators — conceptually a Tabs where the panels rotate, not a multi-slide gallery.

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.

A multi-step wizard progress indicator — numbered/checkmark nodes connected by a progress line, horizontal or vertical.

A horizontal File/Edit/View-style menu bar — multiple top-level triggers coordinated with roving keyboard navigation, each opening a DropdownMenu-style dropdown.

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.

A composable "no data" placeholder — centered icon, title, description, and an optional action — for empty lists, empty search results, or an empty Kanban column.

A vertical or horizontal sequence of status-colored events with a connecting line — order tracking, deployment history, or any event log.

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.

Generates a QR code for a given string value, rendered as an <img>.

Generates a linear barcode (CODE128, CODE39, EAN13, or UPC) for a given value, rendered as an inline SVG.

A project timeline: a collapsible task tree beside day-scale bars, with progress fills, milestones, finish-to-start dependency arrows, and optional drag / keyboard editing.

An editable grid with a formula engine — cell references, ranges, SUM / AVERAGE / MIN / MAX / COUNT / MEDIAN / PRODUCT, your own functions, per-cell formatting and locking.

A pivot table: cross-tabulates flat records into nested row groups and columns with totals — built-in or custom aggregates, drill-down clicks, and full control over labels and cell rendering.

A hierarchy of people or teams with collapsible branches, vertical or horizontal layout, three edge styles and custom node cards.

A windowed list for huge or endlessly loading data. Rows can be a fixed height, individually known, or measured after render.

Composable filter chips. Add typed conditions, edit or remove them, and save the set as a named view.

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.

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.

A tiny, axis-less line, area or bar chart sized for table cells, stat tiles and headlines. Server-safe — plain SVG, no JavaScript.

RadialGauge and LinearGauge show one value against a range — color bands, a target marker, ticks, and fully replaceable center content.

Area-proportional rectangles for part-to-whole data with many categories — disk usage, budget breakdowns, portfolio weight. Squarified layout, static SVG.

A rows × columns matrix colored by value — activity by hour, correlation tables, cohort retention. Single-hue by default, or bring any color scale.

A conversion funnel: stages stack top to bottom and narrow with their value, with step-over-step and total-conversion percentages.

Scatter and bubble chart with multiple series, optional per-series trendlines, and legend entries that toggle series on and off.

Compare several series across 3+ axes on a radial grid, with polygon or circular rings and per-axis maxima.

Shows how a starting value is built up or eroded by a sequence of increases and decreases, ending in totals.

Financial price chart with candles, OHLC ticks or a close line, volume bars, SMA/EMA overlays, a crosshair readout and pan/zoom.

Flow diagram where link thickness is proportional to value. Hover or focus a node to isolate its flows.

A contribution-style calendar: one cell per day, columns are weeks, intensity shows the value.

Choropleth map with bubble markers, zoom and pan. No map data is bundled — pass SVG paths directly or convert GeoJSON with geoJsonToRegions.

A full-featured AI chat window — markdown rendering with syntax-highlighted code blocks, token-by-token streaming, message grouping, per-message actions, attachments, voice input, and a generative-UI extension point for rendering arbitrary custom content in place of a message's text.

Wraps Chat with a thread-list sidebar for multi-conversation apps — a persistent column on wide viewports, a Drawer overlay on narrow ones, both driven by a CSS breakpoint rather than JS viewport tracking.

A lighter, standalone prompt launcher — a single input plus a grid of suggested-prompt cards and an optional inline slash-command menu. For a full back-and-forth conversation, use Chat instead.