General

ColorSnap UI is an open-source React component library with 50+ components, 52 themes, and a CDN embed option. It works in React projects and plain HTML via the CDN bundle.
Yes. ColorSnap UI is free and open source under the CSAL v1.0 license. You can use it in personal and commercial projects without paying a license fee.
No. While the library is built with React, you can use the CDN bundle in plain HTML with CSS classes and the ColorSnap JavaScript API. For full component features, React is recommended.
ColorSnap focuses on beautiful defaults out of the box, a powerful theme system with 52 presets, a CLI that copies source into your project, and dual React + CDN support — so you own the code you ship.

Installation

Run npm install colorsnap-ui, import the CSS in your entry file, wrap your app with the ColorSnap provider if needed, and call ColorSnap.setTheme('midnight') to apply a theme.
The ColorSnap CLI (npx colorsnap-ui add button) copies component source files directly into your project. This gives you full ownership and the ability to customize without fighting abstraction layers.
ColorSnap UI works with npm, yarn, pnpm, and bun. The package is published to the public npm registry as colorsnap-ui.
For React: React 18+ and a modern bundler (Vite, Next.js, etc.). For CDN usage: any modern browser with ES module or UMD support. Node 18+ is recommended for the CLI.

Themes

Call ColorSnap.setTheme('theme-name') in JavaScript, or add the theme class to your root element. Browse all 52 themes on the Themes page.
Yes. Override CSS custom properties (--cs-primary, --cs-background, etc.) on :root or a wrapper element. You can also extend an existing theme preset as a starting point.
Absolutely. Load colorsnap.css and colorsnap.umd.js, then call ColorSnap.setTheme() on page load. All 52 themes are included in the CDN package.
Yes. Many built-in themes are dark-first (midnight, obsidian, aurora). You can switch themes at runtime or tie theme selection to the user's system preference.

CDN

Add the stylesheet and script from jsDelivr in your HTML head and before closing body: colorsnap.css and colorsnap.umd.js. Then use CSS classes like cs-button and the ColorSnap JS API.
Yes. The CDN is served via jsDelivr with global edge caching. For critical production apps, consider pinning a specific version in the URL for reproducible builds.
Yes for static styling. CSS-only usage gives you buttons, cards, badges, and form styles. Interactive components (modals, toasts, theme switching) require the JavaScript bundle.
https://cdn.jsdelivr.net/npm/colorsnap-ui/dist/cdn/colorsnap.css and colorsnap.umd.js. See the Docs for full embed examples.

Licensing

ColorSnap UI is released under the ColorSnap Application License (CSAL) v1.0. It permits free use in open and closed-source projects with attribution requirements detailed in the license file.
Yes. Commercial use is permitted under CSAL v1.0. Review the full license text in the GitHub repository for attribution and redistribution terms.
No. CSAL is not a copyleft license. You can build proprietary applications with ColorSnap UI without being required to open-source your own code.
Yes, when you copy components via the CLI they become part of your codebase. If you redistribute ColorSnap itself (not just your app), follow the CSAL attribution requirements.