Skip to main content

Shadcn/UI

Shadcn/UI Figma

Products

Figma libraryPro blocksTemplatesThemesFigma plugin
PricingDocsHelp

Buy now

Preview

105.5K

DocumentationTheming

Theming

Make the design system your own by customizing colors, typography, and design tokens.

Color System

Our design system uses a semantic color approach with customizable variables.

Primary Colors

The main brand colors used throughout the system:

  • Primary - Main brand color (default: #0c8ce9)
  • Secondary - Supporting brand color
  • Success - Success states (default: #63e82a)
  • Error - Error states
  • Warning - Warning states

Neutral Colors

Background and text colors:

  • Background - Main background (default: #0f0f0f)
  • Background Muted - Secondary backgrounds
  • Text - Primary text (default: white)
  • Text Muted - Secondary text (60% opacity)

How to Customize Colors

In Figma

  1. Open your duplicated design file
  2. Go to the 🎨 Variables page in the left sidebar
  3. Find the Colors collection
  4. Click any color variable to edit
  5. Changes apply automatically to all components

Example: Changing Primary Color

  1. Locate color/primary in the Variables panel
  2. Click the color swatch
  3. Choose your brand color
  4. All buttons, links, and accents update instantly

Typography

The system uses a carefully crafted type scale.

Font Family

Default: Suisse Int'l

To change:

  1. Go to the Variables page
  2. Find typography/font-family
  3. Enter your font name
  4. Make sure the font is installed in Figma

Type Scale

  • Heading 1 - 80px / 80px line height
  • Heading 2 - 56px / 56px line height
  • Heading 4 - 24px / 32px line height
  • Body Large - 18px / 28px line height
  • Body Medium - 16px / 24px line height
  • Body Small - 14px / 20px line height

Spacing System

We use an 8px grid system for consistent spacing.

Spacing Scale

  • 0 - 0px
  • 2 - 8px
  • 3 - 12px
  • 4 - 16px
  • 6 - 24px
  • 8 - 32px
  • 16 - 64px

These spacing values are used for:

  • Padding inside components
  • Margins between elements
  • Layout gaps

Border Radius

Consistent corner rounding creates visual harmony.

  • Small - 4px (inputs, small buttons)
  • Medium - 8px (buttons, cards)
  • Large - 10px (modals, panels)
  • XL - 20px (hero sections)
  • Full - 9999px (pills, avatars)

Dark Mode

The system is built for dark mode by default. To create a light theme:

  1. Duplicate the Variables collection
  2. Name it "Light Mode"
  3. Invert the color values:
    • Background: #ffffff
    • Text: #0f0f0f
    • Adjust opacity values accordingly

Exporting Your Theme

When using the Figma plugin:

  1. Select any frame
  2. Run the plugin
  3. Click "Export Theme"
  4. Copy the generated CSS variables
  5. Paste into your project's CSS file

Best Practices

Do's ✅

  • Maintain consistent contrast ratios (WCAG AA minimum)
  • Test your theme with all components
  • Document custom token values
  • Use semantic naming for colors

Don'ts ❌

  • Don't use too many primary colors (1-2 max)
  • Don't break the spacing scale with random values
  • Don't reduce font sizes below 14px for body text
  • Don't forget to test hover and focus states

Advanced Customization

Creating Custom Variables

  1. Click the + button in Variables panel
  2. Choose variable type (Color, Number, String)
  3. Name it using the convention: category/name
  4. Set the value
  5. Apply to components

Variable Modes

Use modes for different themes or brands:

  1. Select a collection
  2. Click the modes icon
  3. Add a new mode (e.g., "Light", "Dark", "Brand A")
  4. Set different values for each mode

Need Help?