Themes - Shadcn Figma Docs

Apply carefully crafted color themes to your shadcn/ui projects. All themes are free and work seamlessly with both code and Figma.

Installation (CLI)

Our themes are completely free. Install them using the latest shadcn CLI 3.0.

Step 1: Set up shadcn/ui

Make sure shadcn/ui is installed in your project. If not, install it now.

Step 2: Find a theme

Browse the Themes section and copy the CLI command for your chosen theme.

Step 3: Install the theme

Run the command in your project's terminal:

npx shadcn@latest add @shadcnfigma/theme-modern

Step 4: Import required fonts

After installation, make sure to import the font used in your chosen theme in your layout.tsx file.

For example, if your theme uses Inter:

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

Installation (Figma)

You can quickly import themes into your shadcn/ui Figma kit and start designing with your selected theme in minutes.

Step 1: Open your Figma file

Open your shadcn/ui Kit for Figma file.

Step 2: Copy theme CSS

Visit the Themes page, choose a theme, and copy its CSS.

Step 3: Open the plugin

In your Figma file, open the "Figma to shadcn/ui" plugin.

Step 4: Import variables

Navigate to Manage Variables → Import
Select "New Theme"
Paste the copied CSS into the text area
Click "Import Variables"

After a few moments, the plugin will process the theme and add it to your Variables panel as a new mode.

Step 5: Start designing

Switch to your new theme mode in the Variables panel and start designing!

Available themes

Our theme collection includes:

Modern - Clean and minimal design
Dark - Rich dark mode palette
Pastel - Soft, subtle colors
Brutalist - Bold and high-contrast
Minimal - Essential colors only

Each theme includes:

All color tokens - Background, foreground, primary, secondary, accent, and more
Dark mode variants - Light and dark versions
Accessible colors - WCAG AA compliant contrast ratios
Consistent spacing - Works with existing layouts
Custom properties - CSS variables for easy customization

Customizing themes

After installing a theme, you can customize it by editing the CSS variables in your globals.css file:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    /* Add your custom colors here */
  }
}

Need help?

Visit our Help Center or check the Getting Started guide for more information.