Spark UI is a focused collection of signature React components for modern products. Every component is designed to feel distinctive — expressive motion, memorable visuals, and interactions that bring an interface to life. Built on React and Tailwind CSS v4.
Spark UI complements your existing component system instead of replacing it with another set of common UI primitives.
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
Focused components that drop into an existing design system without replacing its foundations.
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.
More components are being actively developed. Read the blog 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.