shadcn/ui (Tailwind CSS V3)

Export Figma Variables as your custom shadcn/ui theme variables. If your shadcn/ui is still using Tailwind V3, please select this export mode. After selecting this export mode, you will get two files:

tailwind.config.js - containing your Tailwind CSS configuration
global.css - containing your custom shadcn/ui theme variables

Features and Optimizations

1. Export shadcn/ui Theme Variables

Variables Xporter will export clean shadcn/ui theme variables, helping you quickly build your Design System.


/* shadcn/ui Variables */
:root {
  /* Collection: Design Tokens */
  --accent: var(--theme-modes-accent);
  --accent-foreground: var(--theme-modes-accent-foreground);
 
  --background: var(--theme-modes-background);
  --border: var(--theme-modes-border);
 
  --card: var(--theme-modes-background);
  --card-foreground: var(--theme-modes-foreground);
  --chart-1: var(--theme-modes-chart-1);
  --chart-2: var(--theme-modes-chart-2);
  --chart-3: var(--theme-modes-chart-3);
  --chart-4: var(--theme-modes-chart-4);
 
  --foreground: var(--theme-modes-foreground);
 
  --input: var(--theme-modes-input);
 
  --muted: var(--theme-modes-muted);
  --muted-foreground: var(--theme-modes-muted-foreground);
 
  --popover: var(--theme-modes-background);
  --popover-foreground: var(--theme-modes-foreground);
  --primary: var(--theme-modes-primary);
  --primary-foreground: var(--theme-modes-primary-foreground);
 
  --radius: var(--radius-modes-radius);
  --ring: var(--primary);
 
  --secondary: var(--color-fuchsia-200);
  --secondary-foreground: var(--color-fuchsia-950);
  --sidebar: var(--theme-modes-background);
  --sidebar-accent: var(--theme-modes-accent);
  --sidebar-accent-foreground: var(--theme-modes-accent-foreground);
  --sidebar-border: var(--theme-modes-border);
  --sidebar-foreground: var(--theme-modes-foreground);
  --sidebar-primary: var(--theme-modes-primary);
  --sidebar-primary-foreground: var(--theme-modes-primary-foreground);
  --sidebar-ring: var(--theme-modes-primary);
}

2. Export Tailwind CSS Configuration

For Tailwind CSS configuration, Variables Xporter will also export it together, ensuring the completeness of Design Tokens.


module.exports = {
  theme: {
    extend: {
      fontSize: {
        body: [
          "var(--font-size-body)",
          {
            lineHeight: "var(--font-size-body-line-height)",
            fontWeight: "var(--font-size-body-font-weight)",
          },
        ],
        title: [
          "var(--font-size-title)",
          {
            lineHeight: "var(--font-size-title-line-height)",
            fontWeight: "var(--font-size-title-font-weight)",
          },
        ],
        heading: [
          "var(--font-size-heading)",
          {
            lineHeight: "var(--font-size-heading-line-height)",
            fontWeight: "var(--font-size-heading-font-weight)",
          },
        ],
        display: [
          "var(--font-size-display)",
          {
            lineHeight: "var(--font-size-display-line-height)",
            fontWeight: "var(--font-size-display-font-weight)",
          },
        ],
      },
    },
  },
};

Variable Organization Suggestions

To ensure perfect export of Figma Variables, variable naming needs to follow certain rules, as they need to conform to shadcn/ui theme variable naming and correspond to Tailwind CSS configuration keys. Good variable organization can bring many benefits:

Improve variable maintainability
Maintain design system consistency
Facilitate team collaboration

Check out the shadcn/ui theme export guide:

shadcn/ui Theme Export