Getting Started

Introduction

ColorSnap UI is a minimal, themeable React component library with 30+ components and 7 built-in themes. It is designed for developers who want shadcn-level quality with CDN-ready delivery and no heavy dependencies.

Whether you use npm in a React project or drop in script tags on a static page, ColorSnap UI gives you composable primitives for forms, feedback, overlays, navigation, and display.

Installation

npm install @colorsnap/ui

Then import components in your React app:

import { Button } from '@colorsnap/ui';

CDN Usage

Add these script tags before your closing body tag:

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@colorsnap/ui/dist/colorsnap.umd.js"></script>
<script>
  if (window.ColorSnap && window.ColorSnap.initTheme) {
    window.ColorSnap.initTheme();
  }
</script>

Basic Usage

Render a button with React.createElement and the CDN bundle:

const { Button } = window.ColorSnap;
ReactDOM.createRoot(document.getElementById('root')).render(
  React.createElement(Button, { variant: 'default' }, 'Click me')
);

Theming

Initialize the saved theme on page load:

window.ColorSnap.initTheme();

Switch themes programmatically:

window.ColorSnap.setTheme('dark');

See the full theming guide for CSS tokens and custom themes.

Contributing

ColorSnap UI is open source. Visit the GitHub repository to report issues, submit pull requests, or join the community on Discord.

Browse all components in the components section.