Browse components.

Semantic ground, surface, ink, rule, signal, danger, and chart tokens for light and dark interfaces.

A three-family type system for expressive headings, readable interface copy, and compact technical data.

A four-pixel rhythm for gaps, insets, control heights, and responsive section spacing.

Restrained corner and border treatments that keep controls crisp and surfaces clearly nested.

A border-first surface hierarchy for cards, popovers, sheets, notifications, and modal layers.

Responsive columns, page gutters, readable measures, and container widths for product screens.

Mobile-first adaptation rules for navigation, data density, actions, and multi-column content.

Lucide icons at consistent optical sizes, stroke weights, spacing, and accessible labeling patterns.

Fast, purposeful transitions with explicit properties, responsive easing, and reduced-motion fallbacks.

A complete control-state contract covering hover, focus, pressed, selected, disabled, loading, and invalid.

Keyboard order, focus visibility, target sizing, contrast, semantics, announcements, and motion preferences.

Primary, outline, secondary, ghost, and destructive actions in three sizes, with icon slots.

Single-line text field with label, placeholder, and invalid states.

Multiline field on the same token set as Input.

Accessible checkbox with checked, unchecked, and indeterminate states.

Binary toggle for settings rows.

Single-select group with keyboard roving and label association.

Styled trigger and popover list. Built on Radix.

Single-value range control with keyboard steps.

Compact count and status pills.

Image, fallback initials, and sizes for identity chips.

Roving-tabindex tab list with associated panels.

Short hover/focus hint. Wrap the app in TooltipProvider.

Action menu with items, separators, and keyboard navigation.

Horizontal or vertical hairline rule.

Ancestor trail with separators.

Page window with previous/next. You own the current page.

Semantic table primitives. Pair with TanStack Table for sorting and selection.

Surface container for grouped content.

Modal overlay with title, description, and a close control.

Slide-over panel from an edge. Same primitive as Dialog.

Non-modal floating panel anchored to a trigger.

Collapsible sections. One or many panels open at a time.

Determinate bar for a 0–100 completion value.

Searchable command list. Pair with Dialog for a palette.

Colored status chip in default, outline, and signal. Optional dismiss.

Fused bordered group wrapping Button children.

Keyboard shortcut hint in IBM Plex Mono.

Slim banner with optional action and close.

Dropzone and file list. Files stay local; the demo does not upload them.

Compact circular dismiss control for banners, toasts, chips, and modal headers.

Square icon-only action for toolbars and carousel chrome. Requires an accessible name.

Sliding-thumb exclusive switch for period pickers. Always one selected.

One-time-code field with a monospace box per digit, paste, and autofill.

Scroll-snap gallery. Swipe, arrows, and a position indicator. No loop.

Positionable toast with status, optional avatar, actions, and a countdown bar.

Single-date popover. One month, editable chip, Cancel / Apply. Commits on Apply.

Dual-month range popover with presets and Cancel / Apply. Same commit contract.

Filterable, sortable table on TanStack Table with row selection and pagination.

Purpose-built destructive confirmation with explicit cancel and action paths.

Searchable single-select picker with empty state and keyboard navigation.

Right-click action menu with groups, shortcuts, and nested items.

Adjustable horizontal or vertical workspace panes with an accessible handle.

Styled overflow container with consistent scrollbars.

Disclosure primitive for advanced controls and secondary content.

Two-state pressed control for formatting, display, and toolbar actions.

Single- or multi-select group of related toggle controls.

Rich preview card anchored to a text link or identity.

Accessible product navigation with dropdown content and keyboard travel.

Layout-preserving loading placeholders for content and data surfaces.

Compact loading indicator for buttons, fields, and inline states.

Form composition for labels, controls, descriptions, and validation errors.

Designed zero-data state with media, explanation, and next action.

Search, status, filters, actions, and result count in one responsive toolbar.

Compact metric card with signed comparison and an inline trend line.

Chronological event stream with actors, timestamps, and connected markers.

Dense event table for actor, target, result, and export workflows.

Reusable empty, loading, failure, and permission-denied surfaces.

Floating selection bar with archive, assign, delete, and clear actions.

Slide-over entity details with metadata and recent activity.

Compact multi-stage workflow indicator with completed and current states.

Three-lane planning board with counts, owners, and add-card actions.

Named filter preset selector for repeatable data views.

Scrollable monospace runtime log with levels, timestamps, and copy action.

Avatar-led comment field with attachment and submit actions.

Responsive page identity with breadcrumb context, status, and action cluster.

Manual light/dark control with a click-origin reveal. Ignores system theme.

Floating app navigation with team and user menus, badges, and a collapsed rail.

Month grid with event chips, overflow popovers, and a month switcher.

Sign-in, sign-up, and verification shells with social providers.

Collapsible multi-step progress with a circular indicator on the active task.

Tabbed activity inbox with unread state, avatars, and inline actions.

Scrollable alert feed with tone icons, date pills, and a week-range control.

Profile card with avatar, name, and label/value rows for clinical details.

Inline text action on the Button size scale. Underline on hover, usable as a link or button.

Sign-in buttons for identity providers. Colorful, black, or outlined, including icon-only.

Controlled multi-page settings dialog. General, profile, tools, and storage.

Context-window usage ring and stacked bar plus plan rate-limit meters.

KPI tiles with a count-up figure and a signed delta chip.

Stacked, overlapping, or 100% area series with a count-up headline and period control.

Period-switchable rounded bars with a count-up total and hover outline.

Tapered conversion funnel. Widths and drop-off come from the stage values.

Polar comparison with filled, dotted, outline, or score treatments.

Concentric rings, gauges, or a stacked half-gauge of parts-to-whole.

Ranked breakdown rows with share or raw bars, optional tabs and icons.

Year heatmap of daily activity with a count-up headline and stat tiles.

Three concentric goal rings. Hover or focus a ring or tile to isolate it.

Funnel-as-rows: horizontal bars sized to the first stage, with percents.

Single-series line over a soft area fill, with a period switcher and hover dot.

Weekly steps bars with a goal marker, week switcher, and count-up total.

Segmented radial sleep score with a qualitative band and metric rows.

Year calendar of per-day mini activity rings with a selected-day control.

Bars and a line on independent axes so a count and a percentage can share a category axis.

Matrix heatmap with a theme-following accent ramp, less/more legend, and optional period ranges.

Flow diagram with tinted links from sources to sinks, node values, and sink share labels.

Correlation scatter with optional bubble encoding. Series averages become legend tiles.

Company revenue, hiring, regional filters, and a sortable customer table.

Patient status, sleep, movement, appointments, and care-team alerts.

Model selection, streamed task progress, file diffs, and a message composer.

Token use, agent mix, streaks, and output over time.

Prompt flow, generation progress, remix controls, and a downloadable gallery.

Request volume, latency, regional uptime, deploy versions, and production alerts.

Qualification, evaluation, proposal, and negotiation with weighted deal values.

Plan limits, projected overages, payment details, and paid invoices.

Pause runs, add context, and review tool calls, cost, and changed files.

Select metrics and dimensions, then switch between chart and table output.

Responders, customer updates, mitigation steps, and service recovery data.

Period comparison, allocation, holdings, and a draft trade.

Dated milestones, assignable risks, and checkable priority tasks.

Animated SVG instrument with tachometer, velocity, boost, and power variants plus a controlled value mode.

Visibility-aware Canvas 2D diagnostic field with layered, network-node, and signal-flow modes.

A self-running or controlled secure-link progress sequence with checkpoints, telemetry, and a reduced-motion completion state.

Scramble-decoding editorial headings with configurable timing, light and dark modes, and semantic fallback text.

A controlled or measured reading-position indicator for the document or a supplied scroll container.

A one-shot or repeatable viewport reveal with direction, distance, timing, and reduced-motion controls.

A content-agnostic surface highlight that follows fine pointers, centers on focus, and stays static on touch.

A restrained perspective wrapper with pointer-relative tilt, optional glare, configurable depth, and a static mobile fallback.

A controlled transition overlay with three complete variants, deterministic completion, and a reduced-motion crossfade.

A data-driven shortcut dock with proximity magnification, selected state, full keyboard movement, and static touch behavior.

A promise-aware action that moves through honest idle, pending, success, and error states with live announcements.