npm package: @sushify-dev/shadcn-color-themes
Description: 19+ beautiful, production-ready color themes for Tailwind CSS and shadcn/ui. Built with OKLCH colors and CSS variables, featuring neo-brutalism, glassmorphism, and more stunning design styles.
Author: Sushify Team
Latest version: 1.0.0

# 🎨 Sushify Color Kits for shadcn/ui

A beautiful collection of **19+ ready-to-use color themes** for Tailwind CSS and shadcn/ui projects. From neo-brutalism to glassmorphism, enhance your web apps with stunning, production-ready color schemes. Seamlessly integrates with Sushify SaaS Kit for instant theming.

[![npm version](https://img.shields.io/npm/v/@sushify-dev/shadcn-color-themes.svg)](https://www.npmjs.com/package/@sushify-dev/shadcn-color-themes)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![Downloads](https://img.shields.io/npm/dm/@sushify-dev/shadcn-color-themes.svg)](https://www.npmjs.com/package/@sushify-dev/shadcn-color-themes)

## 🎯 Design Philosophy

Sushify Color Kits is built on the **shadcn/ui design system**, providing a comprehensive CSS variable system that works seamlessly with:

- **[Tailwind CSS](https://tailwindcss.com)** (v3.4+ and v4+)
- **[shadcn/ui](https://ui.shadcn.com)** components
- Any CSS framework that supports CSS custom properties

The color variable naming follows shadcn/ui conventions, ensuring perfect compatibility with shadcn/ui components while being flexible enough for any Tailwind CSS project.

## ✨ Features

- **19+ Unique Themes** - Carefully crafted color palettes for every design style
- **shadcn/ui Compatible** - Built with shadcn/ui's design system and variable naming
- **Tailwind CSS Native** - Works seamlessly with Tailwind CSS v3.4+ and v4+
- **OKLCH Color Space** - Future-proof colors with better perceptual uniformity
- **Dark Mode Ready** - Every theme includes light and dark variants
- **Zero Config** - Drop-in themes that just work with shadcn/ui components
- **Type Safe** - TypeScript definitions included
- **Production Ready** - Battle-tested in real-world applications

## 📦 Installation

### NPM / PNPM / Yarn

```bash
# npm
npm install @sushify-dev/shadcn-color-themes

# pnpm
pnpm add @sushify-dev/shadcn-color-themes

# yarn
yarn add @sushify-dev/shadcn-color-themes
```

### CDN

```html
<!-- Default theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sushify-dev/shadcn-color-themes/themes/default.css">

<!-- Neo-brutalism theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sushify-dev/shadcn-color-themes/themes/neo-brutalism.css">
```

## 🚀 Quick Start

### For Tailwind CSS Projects

#### 1. Install the package

```bash
pnpm add @sushify-dev/shadcn-color-themes
```

#### 2. Import a theme in your CSS

```css
/* In your main CSS file (e.g., app.css or globals.css) */
@import '@sushify-dev/shadcn-color-themes/themes/neo-brutalism.css';
@import 'tailwindcss';
```

#### 3. Use Tailwind utility classes

```jsx
<div className="bg-primary text-primary-foreground p-6 rounded-lg">
  <h1 className="text-2xl font-bold">Hello World</h1>
  <button className="bg-secondary text-secondary-foreground px-4 py-2 rounded-md hover:bg-secondary/80">
    Click me
  </button>
</div>
```

### For shadcn/ui Projects

#### 1. Install the package

```bash
npx shadcn@latest init
pnpm add @sushify-dev/shadcn-color-themes
```

#### 2. Replace your theme CSS

```css
/* In your app/globals.css or src/index.css */
/* Remove or comment out the default shadcn/ui theme */
/* @import "tailwindcss"; */

/* Import Sushify Color Kit theme instead */
@import '@sushify-dev/shadcn-color-themes/themes/neo-brutalism.css';
```

#### 3. All shadcn/ui components work automatically

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export default function Page() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Sushify Color Kits</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Primary Button</Button>
        <Button variant="secondary">Secondary</Button>
        <Badge>New</Badge>
      </CardContent>
    </Card>
  )
}
```

### Tailwind Configuration (Optional for Tailwind v3)

For **Tailwind CSS v3**, you may need to extend your config to map the CSS variables:

```js
// tailwind.config.js
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        background: 'var(--color-background)',
        foreground: 'var(--color-foreground)',
        primary: {
          DEFAULT: 'var(--color-primary)',
          foreground: 'var(--color-primary-foreground)',
        },
        secondary: {
          DEFAULT: 'var(--color-secondary)',
          foreground: 'var(--color-secondary-foreground)',
        },
        // ... other colors
      },
    },
  },
}
```

For **Tailwind CSS v4**, no configuration needed - the `@theme` directive handles everything automatically!

## 🔧 Technology Stack & Compatibility

### Built With

- **Design System**: [shadcn/ui](https://ui.shadcn.com) variable naming convention
- **CSS Framework**: [Tailwind CSS](https://tailwindcss.com) v3.4+ and v4+
- **Color Space**: OKLCH (superior to HSL/RGB for perceptual uniformity)
- **CSS Standard**: Modern CSS Custom Properties (CSS Variables)

### Compatible With

✅ **Tailwind CSS** v3.4+ and v4+
✅ **shadcn/ui** components (all versions)
✅ **Next.js** 13+ (App Router and Pages Router)
✅ **Vite** + React/Vue/Svelte
✅ **Remix**, **Astro**, **SvelteKit**
✅ **Any framework** that supports CSS variables

### Framework Integration

| Framework | Status | Notes |
|-----------|--------|-------|
| Next.js 13+ (App Router) | ✅ Full Support | Native CSS import support |
| Next.js (Pages Router) | ✅ Full Support | Import in `_app.tsx` |
| Vite + React | ✅ Full Support | Import in `main.tsx` |
| Remix | ✅ Full Support | Import in `root.tsx` |
| Astro | ✅ Full Support | Import in layout |
| SvelteKit | ✅ Full Support | Import in `+layout.svelte` |
| Create React App | ✅ Full Support | Import in `index.tsx` |
| Vanilla HTML | ✅ Full Support | Use CDN link |

### shadcn/ui Components Compatibility

All shadcn/ui components work out of the box:

- ✅ Buttons, Badges, Labels
- ✅ Cards, Dialogs, Modals
- ✅ Forms, Inputs, Selects
- ✅ Dropdowns, Popovers, Tooltips
- ✅ Tables, Data Tables
- ✅ Navigation, Tabs, Breadcrumbs
- ✅ Charts, Graphs
- ✅ And all other shadcn/ui components!

## 🎨 Available Themes

### Modern & Minimal
- **default** - Clean, professional default theme
- **modern-minimal** - Sleek and minimal design
- **glassmorphism** - Frosted glass effects
- **gradient-modern** - Contemporary gradient styles

### Bold & Expressive
- **neo-brutalism** - Bold, raw, and unapologetic
- **memphis-style** - Retro 80s Memphis design
- **cyberpunk** - Futuristic neon aesthetics
- **neon** - Vibrant glowing colors

### Nature Inspired
- **ocean-breath** - Calming ocean blues
- **forest** - Fresh woodland greens
- **sunset** - Warm sunset oranges
- **aurora** - Magical aurora lights
- **nordic** - Cool Scandinavian palette

### Playful & Fun
- **candy** - Sweet pastel colors
- **pastel** - Soft pastel tones
- **retro** - Vintage throwback vibes

### Developer Favorites
- **monokai** - Classic code editor theme
- **twitter** - Twitter's design system
- **supabase** - Supabase brand colors

## 📚 Documentation

### How It Works

Sushify Color Kits uses **CSS custom properties** (CSS variables) to define colors, following the **shadcn/ui design system**. These themes work perfectly with:

1. **Tailwind CSS** - The variables are automatically mapped to Tailwind utility classes
2. **shadcn/ui components** - All shadcn/ui components use these exact variable names
3. **Custom CSS** - You can reference the variables directly in your own CSS

### Architecture

```css
/* 1. Theme defines CSS variables using @theme directive (Tailwind v4) */
@theme {
  --color-primary: var(--primary);
  --color-background: var(--background);
  /* ... more mappings */
}

/* 2. Base layer defines the actual color values */
@layer base {
  :root {
    /* Light mode colors using OKLCH */
    --background: oklch(1 0 0);
    --foreground: oklch(0.15 0 0);
    --primary: oklch(0.5 0.2 180);
    /* ... */
  }

  .dark {
    /* Dark mode colors */
    --background: oklch(0.15 0 0);
    --foreground: oklch(1 0 0);
    /* ... */
  }
}

/* 3. Tailwind automatically generates utility classes */
/* bg-primary, text-foreground, border-border, etc. */
```

### Theme Structure

Each theme provides the following **shadcn/ui-compatible** CSS variables:

#### Color Variables (shadcn/ui Standard)
```css
/* Base Colors */
--color-background          /* Main background color */
--color-foreground          /* Main text color */

/* Interactive Elements */
--color-primary             /* Primary brand color (buttons, links) */
--color-primary-foreground  /* Text on primary background */
--color-secondary           /* Secondary actions */
--color-secondary-foreground /* Text on secondary background */

/* Semantic Colors */
--color-accent              /* Accent highlights */
--color-accent-foreground   /* Text on accent background */
--color-muted               /* Muted backgrounds */
--color-muted-foreground    /* Muted text */
--color-destructive         /* Error/danger states */
--color-destructive-foreground /* Text on destructive background */
--color-success             /* Success states */
--color-success-foreground  /* Text on success background */

/* UI Elements */
--color-card                /* Card backgrounds */
--color-card-foreground     /* Text on cards */
--color-popover             /* Popover/dropdown backgrounds */
--color-popover-foreground  /* Text in popovers */
--color-border              /* Border color */
--color-input               /* Input border color */
--color-ring                /* Focus ring color */

/* Charts (for data visualization) */
--color-chart-1 through --color-chart-5
```

#### Layout & Design Tokens
```css
/* Border Radius (follows shadcn/ui sizing) */
--radius-sm    /* Small radius (buttons, inputs) */
--radius-md    /* Medium radius (cards) */
--radius-lg    /* Large radius (modals) */
--radius-xl    /* Extra large radius */

/* Shadows (elevation system) */
--shadow-xs    /* Subtle elevation */
--shadow-sm    /* Small components */
--shadow-md    /* Cards */
--shadow-lg    /* Dropdowns */
--shadow-xl    /* Modals */
--shadow-2xl   /* Large overlays */

/* Typography (font stacks) */
--font-sans    /* Sans-serif (UI text) */
--font-serif   /* Serif (content) */
--font-mono    /* Monospace (code) */
```

### Using with Tailwind CSS

These variables automatically map to Tailwind utility classes:

```jsx
// Color utilities
<div className="bg-primary text-primary-foreground">
  Primary colored div
</div>

<button className="bg-secondary hover:bg-secondary/80">
  Secondary button
</button>

// Border and effects
<div className="border-border rounded-lg shadow-md">
  Card with border and shadow
</div>

// Typography
<p className="text-muted-foreground font-sans">
  Muted text
</p>
```

### Using with shadcn/ui Components

All shadcn/ui components work out of the box:

```tsx
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

// These components automatically use the theme variables
<Card>
  <Button variant="default">Primary Button</Button>
  <Button variant="secondary">Secondary Button</Button>
  <Button variant="destructive">Destructive Button</Button>
</Card>
```

### Switching Themes Dynamically

```js
// Load theme dynamically
function switchTheme(themeName) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `https://cdn.jsdelivr.net/npm/@sushify-dev/shadcn-color-themes/themes/${themeName}.css`;
  document.head.appendChild(link);
}

// Example usage
switchTheme('neo-brutalism');
```

### Customizing a Theme

You can override any variable in your own CSS:

```css
@import '@sushify-dev/shadcn-color-themes/themes/default.css';

:root {
  /* Override primary color */
  --color-primary: oklch(0.7 0.2 180);

  /* Adjust border radius */
  --radius: 0.5rem;
}
```

## 🌟 Theme Preview

Visit our [demo page](https://sushify.dev/themes) to see all themes in action.

## 📖 Integration Guides

- **[shadcn/ui Integration](examples/integration-examples/shadcn-ui.md)** - Complete guide for shadcn/ui projects with component examples
- **[Next.js App Router](examples/integration-examples/next-app-router.md)** - Next.js 13+ integration with theme switching
- **[Tailwind Configuration](examples/integration-examples/tailwind-config.md)** - Advanced Tailwind CSS setup and customization

## 📄 License

MIT © [Sushify Team](https://github.com/sushify)

## 🔗 Links

- [GitHub Repository](https://github.com/Sushify-dev/shadcn-color-themes)
- [NPM Package](https://www.npmjs.com/package/@sushify-dev/shadcn-color-themes)
- [Demo & Documentation](https://sushify.dev/themes)
- [shadcn/ui Official Site](https://ui.shadcn.com)
- [Tailwind CSS Documentation](https://tailwindcss.com)
- [Report Issues](https://github.com/Sushify-dev/shadcn-color-themes/issues)
- [Sushify Homepage](https://sushify.dev)