Getting started
Welcome to the Academy!
What is shadcn/ui?
Getting started in Figma
Website Project (Lesson 1)
Theming
Introduction to theming
Primary color - Method 1. Tailwind CSS
Primary color - Method 2. Custom color
Neutral colors
Font family
Border radius
Creating new color variables
Example - Warning color variables
Creating new themes
Creating new typography styles
Dark mode
Website Project (Lesson 2)
Components
Introduction to components
Editing components
Creating new component variants
Creating new components
Adding custom icons - Method 1. Icon components
Adding custom icons - Method 2. Icon library
Working with the card component
Pricing card component
Website Project (Lesson 3)
Pro Blocks
Introduction to Pro Blocks
Simple landing page
Custom variables collection
Section Title component
Image properties
Pricing section block
Website Project (Lesson 4)
Plugin
Introduction to plugin
License key
API keys & Tokens
Google AI Studio
Anthropic AI
Best practices
Generating code
Exporting variables
Pro Blocks tab
Installing shadcn/ui
Generating code for the Pricing Card component
Website Project (Lesson 5)
Academy
Theming
Dark mode

Dark mode

Learn how to switch from light to dark mode in the shadcn/ui kit for Figma.

Instructions

One of the most powerful features of variables in the shadcn/ui kit for Figma is the ability to add modes to your variable collections. This allows you to effortlessly switch designs between different contexts, such as light and dark modes, with just a single click.

The shadcn/ui kit for Figma comes pre-configured with both light and dark mode variables in the “3. Theme” variables collection. This means you can instantly transform your entire design from a light theme to a dark theme (and vice versa) without manually adjusting individual elements.

  1. Select any page or frame in your Figma design.
  2. Look for the "Change variables mode" icon in the Layer panel.
  3. Click on this icon to reveal a dropdown menu.
  4. Choose "Color modes" from the options.
  5. Select either “3. Mode” > "Light" or “3. Mode” > "Dark" to instantly apply the change.
Up next
Website Project (Lesson 2)
Welcome to your second Practice Lesson! In this session, we'll update the variables to transform your project from a default shadcn/ui design into a unique and beautiful custom project.