Spark UI is a collection of polished React components, thoughtful interactions, and open-source building blocks for modern products. Every component is designed to feel alive — motion that gives feedback, focus states you can actually see, and defaults that hold up in real products. Built on React, Tailwind CSS v4, and Radix UI.
Think of it as shadcn/ui with motion and personality built in.
Why Spark UI?
Open code
Components are delivered as readable TypeScript source, not compiled bundles. You own the code, not a dependency.
Motion with purpose
Animation reinforces feedback and respects prefers-reduced-motion.
Composable
Small, single-purpose primitives that combine into full experiences, rather than monolithic widgets.
Theme ready
Styling flows through semantic CSS variables, so light mode, dark mode, and your own brand come free.
Accessible by default
Keyboard support, visible focus, and sensible ARIA are built in.
How it works
Spark UI is a shadcn-compatible source registry, not a traditional npm package. You don't add spark-ui to your dependencies and import from it at runtime. Instead, the shadcn CLI copies a component's source files directly into your codebase:
From that point the code is yours: read it, restyle it, rip out the parts you don't need. That trade has real benefits:
- No version lock-in. There is nothing to upgrade or pin; the code lives in your repo.
- Full control. Change a spring curve or a color without forking a library.
- Only what you use. Each component declares its own dependencies, and the CLI installs just those.
See the Installation guide for prerequisites, registry setup, and every install option.
Components
| Component | Description |
|---|---|
| Accordion | A vertically stacked set of interactive headings that reveal content. |
| Alert | A callout for important information with default and destructive variants. |
| Alert Dialog | A modal dialog that interrupts the user for a confirmation. |
| Animated Gradient | WebGL-powered animated mist, lava, and plasma backgrounds with smooth silk-like flowing streams. |
| Badge | A small status label with default, secondary, destructive, and outline variants. |
| Basic Number Ticker | An animated number ticker component with customizable start, target, transitions, and callbacks. |
| Breadcrumb | A navigation trail showing the current page's location in the hierarchy. |
| Button | A button with default, secondary, outline, ghost, destructive, link, and spark variants. |
| Card | A container with header, title, description, content, and footer sections. |
| Checkbox | A control that toggles between checked and unchecked. |
| Dialog | A modal window overlaid on the page with an optional close button. |
| Dropdown Menu | A menu of actions opened from a trigger element. |
| Empty | An empty state with media, title, description, and content slots. |
| Ghost Ether | WebGL-powered interactive fluid simulation with dynamic FBM mist and wandering spirit force trails using three. |
| Hover Card | A card preview shown when hovering a trigger element. |
| Image Trail | A framed mouse-tracking image trail with momentum, captions, and customizable styling. |
| Input | A standard form input styled to match shadcn/ui. |
| Kanban | A composable drag-and-drop task board styled to match shadcn/ui. |
| Logo Carousel | A beautiful, high-performance scrolling logo carousel component with pausing, custom directions, speed, and fade effects. |
| Pagination | A beautiful pagination component with multiple variants, colors, and smooth animations. |
| Popover | A floating panel anchored to a trigger element. |
| Progress | A bar indicating the completion progress of a task. |
| QR Code | A beautiful QR code component with dot styling, gradient support, and extensive color customization. |
| Separator | A horizontal or vertical line separating content. |
| Sheet | A slide-over panel that extends from any edge of the screen. |
| Shimmer Text | A premium text component with an elegant shimmer animation effect. |
| Skeleton | A pulsing placeholder shown while content loads. |
| Spotify Card | A premium Spotify card with real-time metadata and morphing animations. |
| Switch | A toggle control that switches between on and off. |
| Table | A responsive table with header, body, footer, and caption sections. |
| Tactile Highlight | A fluid text highlight component that reacts to viewport visibility and user interaction. |
| Textarea | A multi-line text input field. |
| Toggle | A two-state button that can be toggled on or off. |
| Tooltip | A short label shown when hovering or focusing an element. |
More components are being actively developed. See the roadmap or follow the repo for updates.
Contributing
Spark UI is open source. If you want to add a component or improve an existing one, the guide in CONTRIBUTING.md walks through the full workflow, from source file to published registry item.