Styling and Theming

Customize the look and feel of your ShadcnKit

ShadcnKit uses a combination of Tailwind CSS and CSS variables for styling, allowing for easy customization and theme switching. This guide will walk you through the styling setup and how to customize it.

Global CSS Setup

The global CSS file is located at styles/globals.css. This file contains the base styles and CSS variables for theming.

Customizing CSS Variables

You can customize the theme by modifying the CSS variables. ShadcnKit uses a set of predefined variables for colors, spacing, and other design tokens. Here’s an example of customized CSS variables:

:root {
  --background: 349 46% 95%;
  --foreground: 349 5% 0%;
  --card: 349 46% 90%;
  --card-foreground: 349 5% 10%;
  --popover: 349 46% 95%;
  --popover-foreground: 349 95% 0%;
  --primary: 349 100% 51%;
  --primary-foreground: 0 0% 100%;
  --secondary: 349 30% 70%;
  --secondary-foreground: 0 0% 0%;
  --muted: 311 30% 85%;
  --muted-foreground: 349 5% 35%;
  --accent: 311 30% 80%;
  --accent-foreground: 349 5% 10%;
  --destructive: 0 50% 30%;
  --destructive-foreground: 349 5% 90%;
  --border: 349 30% 50%;
  --input: 349 30% 18%;
  --ring: 349 100% 51%;
  --radius: 1rem;
}

.dark {
  --background: 349 46% 5%;
  --foreground: 349 5% 90%;
  --card: 349 46% 0%;
  --card-foreground: 349 5% 90%;
  --popover: 349 46% 5%;
  --popover-foreground: 349 5% 90%;
  --primary: 349 100% 51%;
  --primary-foreground: 0 0% 100%;
  --secondary: 349 30% 10%;
  --secondary-foreground: 0 0% 100%;
  --muted: 311 30% 15%;
  --muted-foreground: 349 5% 60%;
  --accent: 311 30% 15%;
  --accent-foreground: 349 5% 90%;
  --destructive: 0 50% 30%;
  --destructive-foreground: 349 5% 90%;
  --border: 349 30% 18%;
  --input: 349 30% 18%;
  --ring: 349 100% 51%;
  --radius: 1rem;
}

To apply these custom styles:

Open styles/globals.css
Replace the existing :root and .dark sections with your custom CSS variables

Theme Provider

ShadcnKit uses Next.js’ built-in theme support through the next-themes package. The theme provider is set up in app/theme-provider.tsx:

'use client';

import { ThemeProvider as NextThemesProvider } from 'next-themes';
import type { ThemeProviderProps } from 'next-themes/dist/types';
import * as React from 'react';

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

This provider is then used in the root layout (app/layout.tsx) to enable theme switching:

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  <main id="skip">{children}</main>
</ThemeProvider>

Customizing Themes

To create custom themes or modify existing ones:

Use the Shadcn UI Theme Generator to generate your desired color scheme.
Copy the generated CSS variables.
Paste them into your styles/globals.css file, replacing or modifying the existing :root and .dark sections.

Using Themes in Components

With the theme set up, you can use the theme variables in your components:

const MyComponent = () => {
  return (
    <div className="bg-background text-foreground">
      <h1 className="text-primary">Hello, themed world!</h1>
    </div>
  );
};

Switching Themes

ShadcnKit provides a theme toggle component out of the box.

Best Practices

Use Tailwind classes for most styling needs.
Utilize the predefined CSS variables for consistent theming.
Use the dark: variant in Tailwind classes for dark mode specific styles.

By following this guide, you can easily customize the look and feel of your ShadcnKit project while maintaining the benefits of Tailwind CSS and easy theme switching.

Get Started

Prerequisites

Installation

Configuration

Subscriptions

OAuth providers

Styling

Deployment

Internationalization

Blog and SEO

Built-in Feedback System

Onboarding System

Protected Routes

Admin-User Role System

Styling and Theming

Global CSS Setup

Customizing CSS Variables

Theme Provider

Customizing Themes

Using Themes in Components

Switching Themes

Best Practices

​Global CSS Setup

​Customizing CSS Variables

​Theme Provider

​Customizing Themes

​Using Themes in Components

​Switching Themes

​Best Practices

Global CSS Setup

Customizing CSS Variables

Theme Provider

Customizing Themes

Using Themes in Components

Switching Themes

Best Practices