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 Datetime Picker Disabled
component for the Datetime Picker Display Format
component for the Datetime Picker Form
component for the Datetime Picker Granularity
component for the Datetime Picker Hour
component for the Datetime Picker Locale
component for the Datetime Picker Placeholder
component for the Datetime Picker Ref
component for the Datetime Year Range
Cumulative bid and ask liquidity either side of the mid, with a crosshair that reports the size resting up to any price.
Proposed file changes with per-file accept and reject.
An image reveal component with animated sliding door panels.
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
component for the Dual Range Slider Custom Label
component for the Dual Range Slider Demo
component for the Dual Range Slider Dependencies
component for the Dual Range Slider Label Position
component for the Dual Range Slider Single
A failed-generation state with a preserved prompt and retry.
component for the Event Badge 3D
component for the Event Calendar
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
component for the Feedback Demo
component for the Floating Label Customize
component for the Floating Label Form
component for the Floating Label Input
component for the Floating Label Input Demo
component for the Floating Navbar
component for the Floating Particle Footer
component for the Fluid Ink Morph
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
component for the Footer
component for the Footers Demo
A GitHub profile card with account stats, a contribution graph, and social links.
Pastel gradient card headers with icons and color-coded inheritance labels.
component for the Heading With Anchor
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.
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
component for the Holographic Scan Reveal
component for the HTTP Status Code
Shared icon set used by the footer and profile components.
component for the Image Preview
component for the Image Preview Dependencies