Getting Started

Prerequisites

• Next.js 14+ project with App Router
• Tailwind CSS installed
• shadcn/ui initialized (optional but recommended)

Quick Start

Follow these steps to add a BrandCn theme to your project:

Step 1: Browse Themes

Visit our theme gallery and find a theme that matches your project.

Step 2: Copy the Theme

Click the "Copy CSS" button on your chosen theme. This copies all the CSS variables to your clipboard.

Step 3: Add to Your Project

Open your project's globals.css file and paste the theme variables.

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Paste your theme variables here */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    /* ... more variables */
  }
  
  .dark {
    /* Dark mode variables */
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
  }
}

That's It!

Your project now has a beautiful new theme. The theme will automatically apply to all your shadcn/ui components and Tailwind CSS elements.