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

🎯 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 (v3.4+ and v4+)
• shadcn/ui 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

# 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

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

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

2. Import a theme in your 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

<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

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

2. Replace your theme 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

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:

// 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 variable naming convention
• CSS Framework: Tailwind CSS 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

/* 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)

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

/* 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:

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

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

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

@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 to see all themes in action.

📖 Integration Guides

• shadcn/ui Integration - Complete guide for shadcn/ui projects with component examples
• Next.js App Router - Next.js 13+ integration with theme switching
• Tailwind Configuration - Advanced Tailwind CSS setup and customization

📄 License

MIT © Sushify Team

🔗 Links

• GitHub Repository
• NPM Package
• Demo & Documentation
• shadcn/ui Official Site
• Tailwind CSS Documentation
• Report Issues
• Sushify Homepage