Theming

ShadcnStore blocks use Tailwind CSS and CSS variables for theming, making them highly customizable to match your brand.

Quick Theme Customization with TweakCN

For the easiest theming experience, we recommend TweakCN, a visual theme editor designed for shadcn/ui components.

TweakCN offers:

• Visual Theme Editor: Customize colors, typography, and layouts with real-time preview
• Ready-to-Use Themes: Choose from beautiful preset themes like Modern Minimal, Amethyst Haze, Catppuccin, Neo Brutalism, and many more
• One-Click Apply: Generate and copy CSS variables directly into your project
• AI Theme Generation: Create custom themes from images or text prompts

Visit tweakcn.com to instantly customize your ShadcnStore blocks with beautiful themes!

Manual CSS Variables

If you prefer manual customization, all ShadcnStore blocks use CSS variables for theming:

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 45.1%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 45.1%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 0.5rem;
}

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  /* ... other dark theme variables */
}

Why TweakCN?

Instead of manually writing CSS variables, TweakCN provides:

1. Visual Interface: See changes in real-time as you customize
2. Professional Themes: Access to dozens of professionally designed themes
3. Export Ready: Get production-ready CSS that you can directly paste into your project
4. Community: Browse and share themes with other developers

For detailed theming information, visit the official shadcn/ui theming documentation.

### Utility Classes

For simpler projects, you can use Tailwind utility classes:

```json
// components.json
{
  "tailwind": {
    "cssVariables": false
  }
}

Color System

ShadcnStore blocks use shadcn/ui's semantic color system:

Core Colors

• Background/Foreground: Main page colors
• Primary: Brand colors for key actions
• Secondary: Supporting UI elements
• Muted: Subtle backgrounds and disabled states
• Accent: Hover states and highlights
• Destructive: Error states and dangerous actions

Semantic Usage

// Example block using semantic colors
<div className="bg-background text-foreground">
  <button className="bg-primary text-primary-foreground hover:bg-primary/90">
    Primary Action
  </button>
  <div className="bg-muted text-muted-foreground">
    Supporting content
  </div>
</div>

Base Color Palettes

Choose from predefined base color palettes when initializing shadcn/ui:

Neutral (Default)

Clean, minimal palette perfect for most applications.

Slate

Professional blue-gray tones.

Gray

Balanced gray palette with subtle blue undertones.

Zinc

Modern, contemporary gray palette.

Stone

Warm, natural gray tones.

TIP

ShadcnStore blocks work with any base color palette. The choice affects the default theme but can be customized later.

Customizing Your Theme

1. Edit CSS Variables

Update your main CSS file (usually app/globals.css):

:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
}

2. Adding Custom Colors

Add your own semantic colors to the system:

:root {
  --warning: oklch(0.84 0.16 84);
  --warning-foreground: oklch(0.28 0.07 46);
  --success: oklch(0.65 0.15 145);
  --success-foreground: oklch(0.98 0.02 145);
}

.dark {
  --warning: oklch(0.41 0.11 46);
  --warning-foreground: oklch(0.99 0.02 95);
  --success: oklch(0.55 0.12 145);
  --success-foreground: oklch(0.98 0.02 145);
}

@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
}

Now use your custom colors in blocks:

<div className="bg-warning text-warning-foreground">
  Warning message
</div>

3. Brand Colors

Override primary colors to match your brand:

:root {
  /* Your brand blue */
  --primary: oklch(0.5 0.2 240);
  --primary-foreground: oklch(0.98 0.02 240);
}

.dark {
  --primary: oklch(0.7 0.15 240);
  --primary-foreground: oklch(0.15 0.02 240);
}

Theme Switching

Runtime Theme Switching

Create dynamic theme switching by updating CSS custom properties:

// Theme context
const themes = {
  blue: {
    '--primary': 'oklch(0.5 0.2 240)',
    '--primary-foreground': 'oklch(0.98 0.02 240)',
  },
  green: {
    '--primary': 'oklch(0.5 0.15 145)',
    '--primary-foreground': 'oklch(0.98 0.02 145)',
  }
}

function setTheme(themeName: string) {
  const theme = themes[themeName]
  Object.entries(theme).forEach(([property, value]) => {
    document.documentElement.style.setProperty(property, value)
  })
}

Theme Components

Create reusable theme picker components:

const ThemeSwitcher = () => {
  return (
    <select onChange={(e) => setTheme(e.target.value)}>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
      <option value="purple">Purple</option>
    </select>
  )
}

Border Radius

Customize the global border radius:

:root {
  --radius: 0.5rem; /* Default */
  /* --radius: 0.75rem; /* Larger */
  /* --radius: 0.25rem; /* Smaller */
  /* --radius: 0rem; /* Sharp corners */
}

Typography

ShadcnStore blocks inherit your global typography. In Tailwind v4, fonts are configured using the @theme directive instead of a JavaScript config file.

Adding Custom Fonts

Load fonts using @import or @font-face, then configure them with @theme:

/* Import from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Or use @font-face for local fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/fonts/Inter.woff2') format('woff2');
}

@import "tailwindcss";

@theme {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Oswald", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Using Custom Fonts

Once configured, use the font utilities in your blocks:

<div className="font-sans">
  <h1 className="font-display text-4xl">Display Heading</h1>
  <p className="font-sans">Body text content</p>
  <code className="font-mono">Code snippet</code>
</div>

Font Feature Settings

Configure advanced font features with @theme:

@theme {
  --font-display: "Oswald", sans-serif;
  --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --font-display--font-variation-settings: "opsz" 32;
}

Advanced Theming

Conditional Theming

Apply different themes based on context:

<div className="theme-corporate">
  <SomeBlock />
</div>

.theme-corporate {
  --primary: oklch(0.2 0.1 220);
  --accent: oklch(0.7 0.12 45);
}

Component-Specific Theming

Override theme variables for specific blocks:

<div className="pricing-section">
  <PricingBlock />
</div>

.pricing-section {
  --card: oklch(0.95 0.02 240);
  --border: oklch(0.8 0.05 240);
}

Theme Validation

Ensure your theme maintains accessibility:

1. Contrast Ratios: Maintain WCAG AA compliance (4.5:1 for normal text)
2. Color Blindness: Test with color blindness simulators
3. Dark Mode: Ensure dark variants work well

Framework-Specific Setup

Next.js

// app/layout.tsx
import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Vite

// main.tsx
import './index.css'
import App from './App'

Troubleshooting

CSS Variables Not Working

1. Check components.json has cssVariables: true
2. Verify CSS variables are defined in your global CSS
3. Ensure global CSS is imported in your app

Colors Not Updating

1. Clear browser cache and reload
2. Check CSS variable syntax (use oklch() format)
3. Verify theme class is applied to the correct element

Build Issues

1. Ensure CSS variables are defined at build time
2. Check for CSS purging issues with your build tool
3. Verify all custom properties are properly declared

Next Steps

• Set up dark mode for your themes
• Check out our FAQ for common theming questions

For complete theming documentation, visit the official shadcn/ui theming guide.