ColorSnap UI

Build beautiful web interfaces faster with modern, reusable React, JavaScript, TypeScript, and HTML components.

Python support is planned for v1.0.0.

ColorSnap UI is an open-source component library featuring accessible, customizable, and production-ready UI primitives.

Features

• 🎨 Modern and clean design
• ⚡ Lightweight and fast
• ♿ Accessible components
• 📱 Responsive by default
• 🌙 Multiple built-in themes
• 🔧 Highly customizable
• 🚀 Production-ready
• 📖 Developer-friendly API

Installation

npm install @colorsnap/ui

Current Release: v0.0.1

CDN Usage

<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>

const { Button, setTheme, initTheme } = window.ColorSnap;

initTheme();
setTheme('dark');

Themes

Available themes:

• light
• dark
• midnight
• ocean
• forest
• rose
• mono

import { setTheme, initTheme } from '@colorsnap/ui';
import '@colorsnap/ui/dist/ui.css';

initTheme();
setTheme('ocean');

Usage

import {
  Button,
  Input,
  Card,
  Stack,
  Select,
  Alert,
  Modal,
  Tabs,
  Avatar,
  Badge,
  Stat,
  ToastProvider,
  useToast,
} from '@colorsnap/ui';

import '@colorsnap/ui/dist/ui.css';

Layout

<Stack direction="column" gap="md">
  <Card title="Dashboard" description="Overview of your account">
    <p>Content here</p>
  </Card>
</Stack>

Forms

<Select
  label="Country"
  value={country}
  onChange={(e) => setCountry(e.target.value)}
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ]}
/>

Feedback

const { toast } = useToast();

toast({
  message: 'Saved!',
  variant: 'success',
});

Overlay

<Modal open={open} onClose={() => setOpen(false)} title="Confirm">
  <p>Are you sure?</p>
</Modal>

Navigation

<Tabs
  value={tab}
  onChange={setTab}
  tabs={[
    { label: 'Overview', value: 'overview', content: <p>Overview</p> },
    { label: 'Settings', value: 'settings', content: <p>Settings</p> },
  ]}
/>

Display

<Avatar name="Jane Doe" size="md" />
<Badge variant="success">Active</Badge>
<Stat label="Revenue" value="$12,400" delta="+12%" deltaType="up" />

Documentation

https://colorsnap.org

Contact

[email protected]

License

Licensed under the Apache License 2.0.

See the LICENSE file for details.