Components

Spring-animated button with default, outline, secondary, ghost and link variants.

Pill badge with default, secondary, outline and destructive variants.

Composable card surface.

Text input.

Auto-sizing textarea.

Accessible form label.

Horizontal or vertical divider.

Image avatar with fallback.

Loading placeholder.

Keyboard key hint.

Smoothly animated disclosure list.

Tabs with a spring-sliding active indicator.

Modal dialog with blur overlay.

Side panel drawer.

Hover hint.

Anchored floating panel.

Menu with items, checkboxes, radios and submenus.

Toggle switch.

Checkbox.

Spring-animated progress bar.

Range slider.

Custom scrollbars.

Inline callout with tinted icon tile, title, description, optional action and an animated dismiss.

Pill-shaped "what's new" link with a colored tag, label and an arrow that nudges on hover.

Keeps media at a fixed width-to-height ratio; rounded, clipped container by default.

Composable trail of links with chevron or slash separators, an ellipsis slot and a pill current page.

Joins buttons into one segmented control with shared borders, horizontal or vertical, plus text and separator slots.

Compact filter or input chip: toggles selection with an animated check, takes an icon or avatar, and can be removable.

Round dismiss button with ghost, soft and outline styles, three sizes and a spring rotate on hover.

Show/hide a region with a height animation driven by Radix's measured content height.

Saturation/brightness pad, hue rail, hex field, eyedropper and preset swatches — all pointer and keyboard driven.

Searchable select in a popover: type to filter, arrow keys move a springy highlight, Enter selects; options take icons and hints.

Right-click menu with icons, shortcuts, checkbox/radio items, submenus and a destructive variant.

Month grid for single dates or ranges with sliding month transitions, range hover preview, today marker and full arrow-key navigation.

Trigger pill that opens the Date Calendar in a popover; single-date picker plus a range picker with quick presets.

Hairline separator with optional centered, start or end label, dashed style and vertical orientation.

Bottom sheet built on Radix Dialog that springs up from the edge and can be flicked down by its grab handle to dismiss.

Rich preview card that opens on hover or focus, styled as a soft gray surface with a white inner tile.

Square or circular icon-only button with solid, soft, outline and ghost styles and an optional springy count badge.

One-time-code input with grouped slots, paste and autofill support, blinking caret, pop-in digits and a shake on error.

Text link styled as an action, with an arrow that slides on hover, external icon and an animated underline.

Desktop-style application menubar in a soft pill tray, with shortcuts, checkbox/radio items and submenus.

Gauge for a known range (storage, quota, score) as a smooth bar or segmented blocks, with threshold coloring.

Alert-dialog modal for confirmations: soft surface with a white body tile, tinted icon, and cancel/confirm actions.

Site navigation with pill triggers and an animated shared viewport that resizes between rich dropdown panels.

Inbox-style notification rows with avatar or tinted icon, unread dot, timestamp and actions, grouped in a soft list that animates removals.

Stepper input with −/+ buttons, keyboard and wheel-free editing, Intl formatting and a rolling digit animation.

Single-choice list with springy scaling dots, plus a card variant with title, description and trailing meta.

Split panes with draggable, keyboard-accessible handles implemented with plain pointer events; horizontal or vertical.

Search input with leading icon, keyboard shortcut hint that focuses it, loading spinner and an animated clear button.

iOS-style single-choice switcher with a white thumb that springs between segments; supports icons, counts and full width.

Accessible single-select with a pill or field trigger, grouped options, descriptions and a check indicator.

Sign-in buttons for Google, Apple, GitHub, Microsoft, X, Discord, Slack and Facebook with inline SVG logos in outline, brand, soft and icon styles.

Loading indicator in ring, dots, bars and orbit styles, four sizes, colored via currentColor.

Data table primitives in a rounded card with a tinted header row, hover rows, sortable-friendly heads and status pills.

Editable set of colored tags: type and press Enter to add, Backspace or × to remove, with layout-animated reflow.

Segmented hour/minute/period input: type digits or use arrow keys, with rolling segment animation and 12/24-hour cycles.

Set of toggles with single or multiple selection, either fused in a tray or spaced apart.

Two-state button for formatting or view options, with ghost, outline and soft styles.

Drag-and-drop zone with a file list where each row springs in, fills a per-file progress bar and can be removed.

macOS-style dock whose icons magnify as the pointer approaches.

Pill navbar that hides on scroll down and returns on scroll up.

Thin gradient bar at the viewport edge that tracks page scroll.

Standalone tab strip with a shared-layout underline that glides between tabs.

Cmd+K palette with fuzzy search, grouped results and keyboard navigation.

Canvas confetti burst fired imperatively via ref or from a button.

Avatar row with a springy name card that tilts with the pointer on hover.

Stackable toasts that fan out on hover, with a toast() helper and useToast hook.

Card that morphs into a dialog via shared layout ids.

Apple-style concentric Move, Exercise and Stand rings that spring closed, with goal tiles, a period switcher and a mini week of rings.

Multi-series area chart card that switches between stacked, overlapping and 100% modes, with a hover crosshair tooltip and period range.

Multi-series SVG area chart with gradient fills, a left-to-right reveal and a hover crosshair.

Grouped bar chart built from divs: bars grow in with a stagger, groups show a tooltip on hover or focus.

Ranked horizontal bar list of top pages or referrers with tinted fills that grow in, sort toggle, period tabs and show-more expansion.

Dual-axis card pairing rounded order bars with a smooth conversion-rate line, hover column highlight, tooltip and weekly/monthly switch.

GitHub-style yearly contribution heatmap with month and weekday labels, streak tiles, hover tooltip, legend and a year switcher.

SVG donut whose segments sweep in one after another; hovering a segment or legend row focuses it.

Creator earnings card with a source breakdown bar, stacked pill columns per month, a dashed monthly target line and payout pill.

Horizontal conversion funnel with centered stage bars joined by tapered ribbons, step-to-step drop-off badges and a period switcher.

Weekday by hour intensity heatmap with a peak-time headline, metric switcher, hover readout and gradient legend.

Multi-series line chart card with toggleable series chips, drawn-in smooth lines, hover crosshair with per-series dots and a tooltip.

Multi-series line chart: lines draw in, dots pop in, hover shows a crosshair readout.

Dot-matrix columns per weekday that fill from the bottom, highlighting the busiest day, with hover readout and period switcher.

Two-series radar comparing scores across six axes with a concentric web, morphing polygons between periods and hoverable axis readouts.

Semicircle budget gauge built from stacked category arcs that sweep in, a centered spend total against the limit, and category tiles.

Gray BoardUI card with a counting revenue total, delta badge, period switcher and hoverable column chart with a floating tooltip.

Three-column flow diagram from traffic sources through landing pages to outcomes, with weighted ribbons that draw in and highlight on hover.

Bubble scatter of session length versus conversion with group filter chips, dashed average quadrants, a correlation headline and hover tooltip.

Nightly sleep score with a four-lane hypnogram of awake, REM, light and deep segments, night navigation and stage duration tiles.

Tiny inline line/area chart that draws itself when it scrolls into view.

Sales pipeline card with one row per stage rendered as a strip of slim ticks that light up in sequence, deal counts, values and quarter tabs.

Weekly steps card with teal capsule bars that spring up, a dashed daily goal line, selectable days, week navigation and summary tiles.

Two-column form for configuring a new agent — avatar color, name, model, tool toggles and instructions — beside a live preview card that updates as you type.

Context window meter split into system, tools, messages and free space with an auto-compact marker, plus plan usage meters with reset countdowns.

Long-running agent job card with a progress ring, weighted phase bar, rotating current-activity line, ETA, token and file stats and pause / resume.

Collapsible thinking indicator with a shimmering label, live elapsed timer and reasoning steps that tick off one by one before settling to "Thought for Ns".

Soft gray sign-in / sign-up card with social buttons, an email + password form with reveal toggle, a loading submit state and an animated mode switch.

Composer whose file tiles land one by one with spring motion and an upload progress sweep, supporting drag-and-drop, the file picker and removal.

Chat composer in its generating state: scanning progress bar, bouncing dots with rotating status words, shimmering skeleton lines and a stop / regenerate control.

Two-row chat composer with an auto-growing textarea, a model picker popover, a cycling permission-mode pill and a send button that lights up when there is text.

Notification panel with All / Mentions / Unread tabs, avatar rows with unread dots, click-to-read, swipe-out dismiss, mark-all-read and a caught-up empty state.

Multi-step clarifying questions from an agent in plan mode, with numbered option cards, keyboard shortcuts, multi-select, a free-text "Other" and a summary to approve.

App settings dialog surface with a sliding left nav, animated section swaps for general, appearance, notifications, privacy and billing, and a dirty-aware save bar.

Row of four BoardUI stat tiles on a gray surface, each with a tinted icon chip, counting value, delta badge and a mini bar trend that grows in.

Streaming agent log that reveals tool steps one at a time with spinners, mono details, expandable output lines, durations and an overall progress bar.

Research trail that reveals search queries, then sources landing one by one with favicons, then a synthesized answer with numbered citation pills.

Vertical timeline of events with avatars and relative timestamps; rows slide in one by one.

Month grid with events, previous/next navigation and a highlighted today cell.

Generic sortable, searchable, selectable table with client-side pagination.

Centered placeholder for empty lists: icon tile, title, description and a call to action.

Drag-and-drop board: cards are dragged with motion and dropped into whichever column is under the pointer.

Responsive grid of `StatCard`s that fade up one after another.

Numbered pagination with ellipses; the active pill glides between pages.

Collapsible sidebar with grouped links; the active highlight glides and the rail collapses to icons with tooltips.

Dashboard stat tile: counting value, up/down delta badge and an optional sparkline.

Curved SVG connector between two elements with a travelling light pulse.

Children revolve around a centre at a given radius and speed.

Faux terminal window whose lines type and appear in sequence.

Dotted canvas globe that rotates on its own and spins when dragged.

SVG ring that fills and counts up to a value when scrolled into view.

Multi-step progress with animated checks and a growing connector line.

Spreadsheet-style editable grid with lettered column headers, row numbers, a springy selection ring and keyboard navigation.

Moving highlight across text.

Counts to a value when it scrolls into view.

Drifting gradient fill for headings.

Types and deletes a list of words.

Scroll-linked paragraph whose words brighten one by one as you scroll.

Words or characters blur into focus with a stagger when in view.

Each character springs in from a chosen direction.

Rotating words that blur in letter by letter and flip away.

Text that decodes from random glyphs on mount, in view, or on hover.

Words slide vertically through a clipped window.

Marker-pen highlight that sweeps in behind text when in view.

Text surrounded by randomly twinkling sparkles.

Outlined text whose stroke is a gradient, optionally drifting.

Dark pill button with a light sweep gliding across it.

Button that emits a ripple from the point you press.

Button wrapped in a rotating conic-gradient border that glows on hover.

Call-to-action button with rings pulsing outward behind it.

Outline button that fills from the bottom like rising liquid on hover.

A dot expands into the background while the label slides and an arrow enters.

Button with a flowing multi-stop border and matching glow.

Copies a value to the clipboard and swaps its icon for a check mark.

Drifting, blurred aurora bands for hero sections.

Shooting stars streaking across the parent.

Pointer-reactive particle field on a DPR-aware canvas.

Dotted SVG pattern with an optional radial fade.

Line grid with optional highlighted cells.

Perspective floor grid rolling toward the viewer.

Slowly drifting blurred color blobs.

Layered sine waves drifting across a blurred canvas.

Soft SVG spotlight that glides after the pointer.

Grid lines with light beams racing along them.

Film-grain overlay built from SVG turbulence.

Canvas grid of tiny squares flickering at random.

Line grid whose cells light up and fade at random.

Card whose glow and border follow the pointer.

Card that tilts in 3D toward the pointer with a moving glare.

Pile of cards where the front one drops to the back on an interval.

Card that grows into a centered modal with a shared layout transition.

Image card whose caption slides up to reveal more on hover or focus.

Tinder-style deck you drag left or right to dismiss.

Frosted-glass surface with an inner highlight and pointer sheen.

Before/after image slider with a draggable, keyboard-accessible handle.

Pricing card with a monthly/yearly switch and a rolling price.

Shifts its children relative to scroll at a configurable speed.

Text steps scroll past while a sticky panel swaps to match the active step.

Vertical SVG beam on the left that lights up as you scroll through content.

Cards that pin at the top and pile up as you scroll, earlier ones shrinking behind.

Drifting text strip that accelerates with scroll velocity.

Notification-feed list where items enter one at a time and push the rest down.

Overlapping avatars with a trailing +N counter and staggered entrance.

Collapsible file explorer with animated folder height.

Drag-to-swipe carousel with autoplay, dots, arrows and keyboard support.

In-view reveal wrapper with presets and staggered children.

Infinite scrolling strip, horizontal or vertical, pause on hover.

Travelling light along a border.

Element that leans toward the cursor.

Generic phone, slim phone, tablet, laptop, desktop, watch and browser frames drawn purely with CSS and neutral tokens; every measurement scales with the frame width via container units, and children render as the screen.

Theme-aware raw WebGL fragment-shader background that pauses offscreen and falls back to a muted surface.