Branding & Theming

Customize your application's visual identity - colors, typography, and logo - using Tailwind CSS v4 and Shadcn UI themes without touching component code.

The Next.js Prisma kit uses Tailwind CSS v4 with Shadcn UI for styling. All branding customizations happen in CSS files and a few TypeScript configuration files. You can swap themes, change fonts, and update your logo without modifying any component code. The kit ships with multiple pre-built themes you can apply with a single import.

Definition: Branding in the kit refers to the visual customization layer - CSS variables for colors, font definitions, and logo components - that sits on top of the Shadcn UI component library.

Customize branding when: you're preparing for launch, white-labeling for clients, or aligning with existing brand guidelines.

Use defaults when: prototyping or validating ideas - the default theme is production-ready.

If unsure: start with a pre-built Shadcn UI theme from the themes page and customize from there.

Branding Components

Documentation Structure

Quick Start: Apply a Theme

The fastest way to rebrand is to copy CSS variables from a Shadcn UI theme:

1. Go to the Shadcn UI Themes page
2. Choose a theme and click "Copy"
3. Paste the CSS variables into apps/web/styles/custom.css:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    /* ... paste all variables from the theme */
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    /* ... dark mode variables */
  }
}

4. Restart the dev server to see changes

File Structure

apps/web/
├── styles/
│   ├── globals.css      # Main entry (imports others)
│   ├── theme.css        # Tailwind v4 theme tokens
│   ├── shadcn-ui.css    # Shadcn UI variables
│   ├── custom.css       # Your customizations (start here)
│   └── makerkit.css     # Kit-specific styles
├── components/
│   └── app-logo-image.tsx  # Logo component
├── lib/
│   └── fonts.ts         # Font definitions
└── public/
    └── images/favicon/  # Favicon files

Common Pitfalls

• Editing the wrong CSS file: Put your customizations in custom.css, not shadcn-ui.css. The latter may be overwritten in updates.
• Forgetting to restart the dev server: Tailwind CSS v4 changes sometimes require a restart to take effect.
• Using wrong theme class name: The class in layout.tsx must match the imported theme exactly (e.g., style-nova, not nova).
• Overriding CSS variables incorrectly: Use the :root selector for light mode and .dark for dark mode variables.

Next: Tailwind CSS →