A modern component library built with shadcn/ui and Tailwind CSS. Spectrum UI offers elegant, responsive components and smooth animations designed for high-quality interfaces.
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
component for the Accordion
An editable plan checklist the agent proposes before running.
A timeline of tool calls with status, arguments, results, and parallel sub-steps.
component for the alert-2
component for the alert-3
component for the alert-4
component for the alert-demo
component for the Animated Card
component for the Animated Drawer
component for the Animated SVG Chart
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
component for the Animated Testimonials
component for the Animated Wave Footer
A human-in-the-loop approval for an action an agent wants to take.
Filled areas with gradient, hatch, dotted, stacked, and dashed-stroke variants.
component for the Autosize Textarea Customize
component for the Autosize Textarea
component for the Autosize Textarea Dependencies
component for the Autosize Textarea Form
component for the Autosize Textarea Max Height
component for the Autosize Textarea Ref
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 brutalist plan table whose featured column wears a blue banner on top.
Vertical and horizontal bars with hatch, duotone, gradient, stripe, stack, and glow fills.
A premium interactive Bento Grid component
A Swiss-style pricing table with crop marks, mono labels, and a royal-blue accent.
A year of daily values as week columns — the contributions grid, with five quantised intensity steps, streak stats, and month rails.
OHLC candles with optional volume and hollow-up bodies — for stocks, SOL, and any market pair.
Shared data, fills, tooltip, and axis chrome for Spectrum Charts.
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 first-run greeting with staggered suggestion chips.
component for the Circular Navbar
Inline citation markers with hover previews or a footnote list.
An AI code block with a file header, copy, and line collapse.
The retention triangle: cohorts down, periods across, intensity by share retained, with a row and column crosshair and a period average.
A fully customizable, smooth-animated Command Palette (Cmd+K) component
Demo usage for the Command Palette component
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.
A date-grouped conversation sidebar with pinning.
A dark comparison table with dashed rows, mint checks, and per-plan CTA pills.
component for the Datetime Picker and Time Input
component for the Datetime Picker Calendar Settings
component for the Datetime Picker Demo