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.
component for the Skeleton
component for the Skeleton Card
component for the Skeleton Card
A skeleton that pulses while loading, then cross-fades and un-blurs into the real content.
Demo usage for the Skeleton Reveal component
Compact inline price marks for watchlists, token tables, and portfolio rows.
component for the Spinner Demo
component for the Spinner Size
component for the Spinner Toggle
component for the Spinner With Text
component for the Stacked Circular Footer
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
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.
component for the Status Badge
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.
A support queue with priority icons, SLA countdowns, assignee avatars and status pills.
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 onDelete
Demo usage for the Swipe to Delete component
component for the Tab Navbar
A satisfying todo checkbox row with spring fill, drawn-in check, confetti burst and animated strikethrough
Demo usage for the Task Checkbox component
Live agent task rows with status badges and expandable notes.
Workspace member management with roles, two-factor status, last activity and a remove action.
component for the Testimonials
A status label that swaps its text in place, exiting up with blur and entering from below.
Demo usage for the Text States component
A minimal typing indicator — bouncing dots or a sliding bar.
Stacked toasts with status morphs, swipe to dismiss, actions and layout-aware motion.
Demo usage for the Toast Stack component
A one-line manifesto that types itself in, over a metric row.
Compact tool-call chips that expand into their arguments and result.
An analytics table with mono paths, share-of-traffic bars and signed week-over-week deltas.
A money transfer form card with account pickers, a summary and a confirm action.
Demo usage for the Transfer Funds 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
Compliance marks that expand to scope, over a logo row and link columns.
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 context-window meter with token counts and estimated cost.
Resolves auto to dark or light from a .dark class on <html>, then the OS preference, updating live.
component for the Use Toast
A typewriter hook that types, holds and deletes phrases on a loop, plus a prefers-reduced-motion hook.
A voice recorder pill with animated level bars and a live timer.
Waitlist capture with an avatar stack and a live position counter.