50+ components, 52 themes, zero config. Works with React and plain HTML.
<!-- Paste in <head> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/colorsnap-ui/dist/cdn/colorsnap.css"> <script src="https://cdn.jsdelivr.net/npm/colorsnap-ui/dist/cdn/colorsnap.umd.js"></script>
Everything you need to ship polished interfaces without the setup headache.
Works out of the box, no setup required. Import a component or paste a CDN link and start building immediately.
Switch themes with one line of code. Midnight, Ocean, Cyberpunk, Sakura, and 48 more — all included free.
Everything you need to build modern UIs — buttons, cards, modals, tables, charts, forms, and more.
Two lines of HTML, no npm needed. Drop ColorSnap into any static site, landing page, or prototype instantly.
Add components directly to your project with one command. You own the code — copy, customize, and ship.
Framer Motion in every React component. Smooth hover effects, transitions, and micro-interactions — zero configuration.
React for apps. HTML classes for everything else.
npm install colorsnap-ui import { ThemeProvider, Button } from 'colorsnap-ui'; export default function App() { return ( <ThemeProvider theme="midnight"> <Button variant="primary">Hello World</Button> </ThemeProvider> ); }
<!-- In <head> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/colorsnap-ui/dist/cdn/colorsnap.css"> <script src="https://cdn.jsdelivr.net/npm/colorsnap-ui/dist/cdn/colorsnap.umd.js"></script> <!-- Anywhere in body --> <button class="cs-button">Hello World</button> <script>ColorSnap.setTheme('midnight');</script>
Pick a theme below — the preview updates instantly. Same API for React and the CDN.
Deep purple tones for focused night work.
65% complete
Every component inherits the active theme automatically.