@spectrumui

An editable plan checklist the agent proposes before running.

A timeline of tool calls with status, arguments, results, and parallel sub-steps.

A human-in-the-loop approval for an action an agent wants to take.

A first-run greeting with staggered suggestion chips.

Inline citation markers with hover previews or a footnote list.

An AI code block with a file header, copy, and line collapse.

A date-grouped conversation sidebar with pinning.

Proposed file changes with per-file accept and reject.

An image reveal component with animated sliding door panels.

A failed-generation state with a preserved prompt and retry.

A GitHub profile card with account stats, a contribution graph, and social links.

component for the alert-demo

component for the alert-2

component for the alert-3

component for the alert-4

component for the Animated Card

component for the Animated SVG Chart

component for the Animated Testimonials

component for the Autosize Textarea Dependencies

component for the Autosize Textarea

component for the Autosize Textarea Max Height

component for the Autosize Textarea Ref

component for the Autosize Textarea Form

component for the Autosize Textarea Customize

component for the Datetime Picker Demo

component for the Datetime Picker Hour

component for the Datetime Picker and Time Input

component for the Datetime Year Range

component for the Datetime Picker Locale

component for the Datetime Picker Calendar Settings

component for the Datetime Picker Display Format

component for the Datetime Picker Placeholder

component for the Datetime Picker Granularity

component for the Datetime Picker Disabled

component for the Datetime Picker Ref

component for the Datetime Picker Form

component for the Dual Range Slider Dependencies

component for the Dual Range Slider Demo

component for the Dual Range Slider Custom Label

component for the Dual Range Slider Label Position

component for the Dual Range Slider Single

component for the Event Badge 3D

component for the Event Calendar

component for the Feedback Demo

component for the Floating Label Input

component for the Floating Label Input Demo

component for the Floating Label Customize

component for the Floating Label Form

component for the Footers Demo

component for the Animated Wave Footer

A selection-anchored AI edit: suggestion toolbar, word diff, accept or reject.

Metric cards with spark bars, trend deltas, and an AI note.

A pixel-grid loader with a shimmering label and live elapsed timer.

What the assistant remembers, as removable chips.

Per-message controls — copy, regenerate, and thumb feedback.

A model picker as a radio list or segmented control, with badges and disabled states.

A prompt input with attachments, a model picker, and a stop state.

A message-quota banner with a live reset countdown.

An expandable chain-of-thought trace with a live thinking timer.

component for the Stacked Circular Footer

component for the Floating Particle Footer

component for the Footer

Shared icon set used by the footer and profile components.

component for the HTTP Status Code

component for the Image Preview Dependencies

component for the Image Preview

component for the Infinite Scroll Dependencies

component for the Infinite Scroll Demo

component for the Loading Button Dependencies

component for the Loading Button Demo

component for the Loading Button Usage

component for the Loading Button As Child

component for the Multiple Selector Dependencies

component for the Inline Code

component for the Input Model Demo

component for the Multiple Selector Demo

component for the Multiple Selector With Disable Options

component for the Multiple Selector Disabled

component for the Multiple Selector No Default Select

component for the Multiple Selector Controlled

component for the Multiple Selector Hide Clear All

component for the Multiple Selector Creatable

component for the Multiple Selector With Async Search

component for the Multiple Selector With Async Search And OnFocus

component for the Multiple Selector With Async Search And Creatable

component for the Multiple Selector With Async Search And Creatable And Group

component for the Heading With Anchor

component for the Multiple Selector With Sync Search And Creatable And Group

component for the Multiple Selector Manually Controlled

component for the Multiple Selector With Group

A staged progress tracker for long-running AI jobs.

A streamed answer with inline citations, sources, and follow-ups.

An inline AI suggestion with apply and dismiss.

Live agent task rows with status badges and expandable notes.

A minimal typing indicator — bouncing dots or a sliding bar.

Compact tool-call chips that expand into their arguments and result.

A context-window meter with token counts and estimated cost.

component for the Use Toast

component for the Multiple Selector Max Selected

component for the Multiple Selector Max Text Length

component for the Multiple Selector No Placeholder When Selected

component for the Multiple Selector Fixed Option

component for the Multiple Selector Ref

component for the Multiple Selector Command Props

component for the Multiple Selector With Form

component for the Multiple Step Form Demo

component for the Navbar Demo

component for the Circular Navbar

component for the Tab Navbar

component for the Floating Navbar

component for the Sidebar Navbar

component for the Login Card

component for the Kanban Board

component for the Profile Dropdown

component for the Product Card

component for the Progress With Value Dependencies

component for the Progress With Value

component for the Progress With Value Position

component for the Progress With Value Custom Label

component for the Responsive Modal Dependencies

component for the Responsive Modal

component for the Responsive Modal Side

component for the Accordion

component for the Accordion Dependencies

component for the Accordion Card

component for the Accordion Filled

component for the Accordion Ghost

component for the Accordion Generative

component for the Skeleton

component for the Skeleton Card

component for the Skeleton Card

component for the Spinner Demo

component for the Spinner Size

component for the Spinner With Text

component for the Spinner Toggle

component for the Status Badge

component for the Testimonials

component for the Holographic Scan Reveal

component for the Orbital Letters

component for the Fluid Ink Morph

component for the Animated Drawer

A fully customizable, smooth-animated Command Palette (Cmd+K) component

Demo usage for the Command Palette component

A scratch-to-reveal coupon card with an HTML5 canvas foil, dust particles on scratch, and a reveal callback at a configurable threshold

Demo usage for the Scratch Card component

A premium macOS-Style Animated Dock Menu component

Demo usage for the macOS-Style Animated Dock Menu component

Glassmorphism variant demo for the macOS-Style Animated Dock Menu component

A premium interactive Bento Grid component

A heart like button micro-interaction with a spring pop, ring pulse, radial particle burst, and a rolling odometer count

Demo usage for the Like Button component

A 3D perspective tilt card that rotates toward the pointer with spring smoothing, parallax translateZ depth layers, and a pointer-following glare highlight

Demo usage for the 3D Tilt Card component

A press-and-hold confirmation button for destructive actions with a filling progress ring, spring-back on early release, and a success check morph on completion

Demo usage for the Hold to Confirm component

A Slack-style emoji reaction row with popping chips, direction-aware rolling counts, and a staggered emoji-picker popover

Demo usage for the Reaction Bar component

An animated star rating input with hover-preview wave, pop and sparkle burst on commit, rolling value label, and fractional read-only display

Demo usage for the Star Rating component

An animated quantity input for carts and forms with rolling digits, hold-to-repeat acceleration, and a boundary shake

Demo usage for the Quantity Stepper component

A morphing follow/unfollow button with a spring width morph, animated check draw, and a hover-revealed unfollow state

Demo usage for the Follow Button component

A bell icon button with a ring-shake swing, springy unread badge with rolling odometer count, and a pinging dot mode

Demo usage for the Notification Bell component

A five-level feedback rating where one large SVG face morphs its mouth, eyes and color between moods as you hover and click, with a joy bounce on commit

Demo usage for the Face Rating component

An inline undo pill with a draining countdown ring that pauses on hover and fires undo or expire callbacks

Demo usage for the Undo Pill component

A password input with an animated four-segment strength meter, crossfading strength label, requirements checklist with drawing check marks, and a visibility to…

Demo usage for the Password Strength component

An iOS-style swipeable list-item wrapper that reveals a delete action on drag, pops the icon at the commit threshold, and collapses the row before firing onDel…

Demo usage for the Swipe to Delete component

A satisfying todo checkbox row with spring fill, drawn-in check, confetti burst and animated strikethrough

Demo usage for the Task Checkbox component

A multi-state async action button that morphs between idle, loading, success and error with an arc spinner, drawn-in check, tight error shake and auto-reset

Demo usage for the Morph Button component

An iOS-quality animated toggle switch with a press-to-stretch knob, drag-to-toggle with flick support, and optional crossfading knob icons

Demo usage for the Animated Switch component

An overlapping avatar stack that fans apart on hover, springs name tooltips over each face and expands hidden members from a +N pill with a stagger

Demo usage for the Avatar Stack component

A 3D keycap that physically depresses when the real key is pressed, with combo shortcuts that pulse and fire when every key is held at once

Demo usage for the Kbd Key component

A share trigger that fans out into copy-link and custom share actions with staggered springs, tooltips and full keyboard support

Demo usage for the Share Button component

A voice recorder pill with animated level bars and a live timer.

Agent search results with a live reading indicator.

Shared data, fills, tooltip, and axis chrome for Spectrum Charts.

Vertical and horizontal bars with hatch, duotone, gradient, stripe, stack, and glow fills.

Multi-series lines with solid, dashed, bump, step, gradient, and glow strokes.

Filled areas with gradient, hatch, dotted, stacked, and dashed-stroke variants.

Pie and donut charts with padded sectors, labels, and optional sector glow.

Radar plots with filled or outline series, circle grids, and glow.

Full and semi-circle radial bars for share and progress.

Bars, lines, and areas on one plot — mix fills, dashes, and glow per series.

Wiring any chart to a real source: fetch in an effect, SWR or React Query, server components, and streaming — with every outcome mapped onto a status.

Loading skeletons, empty states and error states for every chart — one wrapper, six skeleton shapes, and a frame height that never shifts between them.

A trading-desk chart in pure SVG: OHLC candles, a volume pane, a snapping crosshair with axis-pinned price and time, a range selector that morphs the series, a…

Price, RSI and MACD stacked on one time axis with a single crosshair that reports all three panes at once.

Cumulative bid and ask liquidity either side of the mid, with a crosshair that reports the size resting up to any price.

A trading ladder with cumulative depth bars, a spread row, and flashing updates in live mode.

Account value against cost basis with drawdown from the running peak shaded underneath.

A squarified treemap sized by market cap and coloured on a diverging change ramp — the market map.

A year of daily values as week columns — the contributions grid, with five quantised intensity steps, streak stats, and month rails.

The retention triangle: cohorts down, periods across, intensity by share retained, with a row and column crosshair and a period average.

KPI cards with a big value, the delta written as a sentence, and a scrubbable sparkline or progress bar beside it — the row every dashboard opens with.

A distribution of raw samples binned on nice edges, with p50 / p95 / p99 pinned onto the plot — the chart that shows the tail your average hides.

OHLC candles with optional volume and hollow-up bodies — for stocks, SOL, and any market pair.

Ticker chrome with last price and signed delta. Use it for tokens, equities, or protocol TVL.

Compact inline price marks for watchlists, token tables, and portfolio rows.

Staggered serif panels on a dot grid, with one entry price and expert CTAs.

Pastel gradient card headers with icons and color-coded inheritance labels.

A dark comparison table with dashed rows, mint checks, and per-plan CTA pills.

A Swiss-style pricing table with crop marks, mono labels, and a royal-blue accent.

Cream serif cards with a black featured card lit by a crimson glow.

A brutalist plan table whose featured column wears a blue banner on top.

Plans printed as thermal receipts with torn edges, dotted leaders, and a rubber stamp.

A typewriter hook that types, holds and deletes phrases on a loop, plus a prefers-reduced-motion hook.

A command palette that types queries and live-filters grouped results, with keyboard navigation.

Demo usage for the Command Search component

An activity feed card that lists agent runs with duration and recency chips.

Demo usage for the Recent Activity component

A credentials card that auto-fills email and password on a loop, with a danger zone.

Demo usage for the Account Access Card component

An AI chat card that types prompts into its composer, with send, attach and reset actions.

Demo usage for the AI Chat Card component

A compact navigation card that lists links with icons, with a spring slide on hover.

Demo usage for the Nav List Card component

A money transfer form card with account pickers, a summary and a confirm action.

Demo usage for the Transfer Funds Card component

A tabbed FAQ card with animated accordion answers and a support footer.

Demo usage for the FAQ Tabs Card component

A nav list with a tree rail and a spring marker that follows hover and settles on the active link.

Demo usage for the Tree Nav component

Resolves auto to dark or light from a .dark class on <html>, then the OS preference, updating live.

A pill button framed by a real-time WebGL liquid-metal ring, in chromatic, silver and gold presets.

Demo usage for the Metal Button component

An AI prompt bar with a live liquid-metal send button that reflects onto the chips beside it.

Demo usage for the Metal Prompt Bar component

A card wrapped in an animated border beam, traveling or breathing, in four color palettes.

Demo usage for the Beam Card component

A search bar whose bottom edge lights up with a traveling beam while it has focus.

Demo usage for the Beam Search Bar component

An iOS-style island pill that morphs between live activity views with a bouncy resize.

Demo usage for the Dynamic Island component

Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.

Demo usage for the Expandable Action Bar component

Stacked toasts with status morphs, swipe to dismiss, actions and layout-aware motion.

Demo usage for the Toast Stack component

A rolling digit ticker that counts to a value with per-digit stagger, padding and blur.