Academytheming

Creating new themes

Learn how to create new themes in the shadcn/ui kit for Figma.

Instructions

Our Figma kit lets you create themes quickly, so you can test out different styles or build multi-brand design systems in just minutes. For a quicker starting point, you can first use our Theme Generator to build a custom shadcn/ui theme, then bring that direction into your Figma variables and fine-tune it from there.

To add a new theme:

  1. Open the variables panel
  2. Navigate to the Themes collection
  3. Click "+" in the top right corner to add new mode
  4. Rename your new mode (e.g., "Brand B" or "High Contrast")
  5. Adjust the variables in your new mode to match your desired aesthetic

This approach allows you to maintain multiple complete themes within a single design system, making it easy to switch between different visual styles while preserving component structure.