Manual Theming Setup in shadcncraft

How variables are organized changed in v3 of the kit. Not sure which version you have? See how to tell which version you're using.

Regular theming means editing the Figma variables by hand, the manual counterpart to instant theming with the plugin. In v3 you do this in the Style collection, which holds the source-of-truth values for every style. Each style is one mode in that collection. For how this connects with code, see the shadcn/ui theming overview.

Three collections are in play. It's worth knowing which to touch:

• Style: the source of truth. Colors, radii, typography, spacing and component tokens all live here, one mode per style. This is the collection you edit.
• Mode: a Light/Dark alias layer that components bind to. It references the Style collection. Don't edit Mode. Editing it bypasses the source of truth.
• Tailwind: raw scale primitives (spacing, radius, font size). Edit only when you need to change a primitive value.

See Variables for the full collection breakdown.

Editing variables#

Select the style mode you want to change in the Style collection, then edit its values.

Change the primary color#

To update your primary color (e.g. to a custom blue #297EFF):

1. Open the Variables panel
2. Switch to the Style collection and select the style mode you're editing
3. Locate the color/light/primary variable
4. Enter #297EFF directly in the value field
5. Repeat the process for color/dark/primary
6. Figma will apply the new color across all primary component references

Update neutral colors#

The neutral grays behind background, border, input, and muted elements are edited the same way.

1. In the Style collection, locate the matching color/light/* and color/dark/* variables
2. Swap out the current values for your own
3. Changes will cascade across any components that rely on these variables

Component-level tokens#

Most colors and sizes are shared, but some components carry their own tokens in the Style collection's component/ group, so you can tweak one component without touching the rest. These tokens cover properties like padding, gap, background, corner radius, size, and hover states. For example:

• component/card/radius: the Card's corner radius
• component/input/bg: the Input's background
• component/badge/px: the Badge's horizontal padding
• component/button/variant-ghost/bg-hover: the ghost Button's hover background

Edit a component/<name>/… token to restyle just that component. If a component has no token for the property you want to change, it's inheriting a shared value. Edit that instead.

Adjusting border radius#

v3 has a semantic radius layer. The radius/sm … radius/4xl scale in the Style collection sits between the raw Tailwind radius primitives and your components. Components bind to the semantic scale, not to raw values.

That means you adjust radius once:

1. Open the Variables panel
2. Navigate to the Style collection
3. Edit the semantic values: radius/sm, radius/md, radius/lg, and so on

Every component using that step re-rounds automatically. There's no need to change a radius variable on each component. A few components also expose a component/<name>/radius token for when they need to differ from the scale.

Changing the font family#

Typefaces live in the Style collection's font/family group:

1. Open the Variables panel
2. Go to the Style collection
3. Edit font/family/sans, font/family/heading, font/family/serif, or font/family/mono

Using opacity variables#

Tailwind lets you apply opacity to colors using syntax like bg-blue-600/90. You can replicate this in Figma using alpha variables.

To apply 90% opacity to a color:

1. Add your color as a Fill in Figma
2. Add a second Fill layer above it
3. In the color picker, switch to Library
4. Search for and apply the alpha/90 variable

For hover states specifically, check the component/ group first. Many components ship a dedicated bg-hover or text-hover token (for example component/toggle/bg-hover or component/select/item/bg-hover). Editing the component's hover token is cleaner than stacking an opacity layer by hand.

Working with text styles#

The kit ships Figma text styles aligned with shadcn's type scale (text-xs through text-9xl). Each one is powered by Style-collection variables:

• font/family/*: the typeface
• text/<size>/size and text/<size>/lh: the per-style font size and line height

Edit those variables and every text style that uses them updates. The raw size and weight primitives live in the Tailwind collection as font/size/text-* and font/weight/font-*.

This keeps visual language consistent from design to dev. The text styles map directly onto Tailwind's typography classes.

Creating new styles and variables#

Duplicate a style#

The fastest manual way to make a new style is to copy an existing one:

1. Open the Variables panel and select the Style collection
2. Right-click the mode of the style closest to what you want
3. Duplicate it and rename the new mode (e.g. Brand A)
4. Edit the new mode's variable values

The file ships with all eight styles, so you always have a solid base to duplicate from.

Create a new variable#

Custom variables are supported. Just be sure they're needed. The existing shadcncraft variable sets cover most use cases, and unnecessary additions can bloat your system.

To create a new color variable that follows the established structure:

1. In the Style collection, add:
   • color/light/<name> (e.g. color/light/warning)
   • color/dark/<name> (e.g. color/dark/warning)
   • Edit the variables to hide them from publishing if they're internal
2. In the Mode collection, add:
   • A <name> alias referencing the light/dark versions
   • Adjust the scope to control where the variable applies
3. Use your new variable in components as needed

Example: Warning color#

• color/light/warning: #F59E0B
• color/dark/warning: #F59E0B
• color/light/warning-foreground: #451A03
• color/dark/warning-foreground: #451A03
• Add warning and warning-foreground aliases to the Mode collection
• Apply to UI components where caution or warning states are needed
• Use the Figma to shadcn/ui plugin to add matching variables to your codebase

Dark mode#

Light and dark are handled by the Mode collection, which has exactly two modes: Light and Dark. Every style resolves through it, so switching modes re-themes your file instantly, with no need to duplicate layouts or rebuild anything.

How to switch modes:

1. Select a page or frame
2. In the Layer panel, look for the "Apply variable mode" icon
3. Click to open the dropdown menu
4. Select either Mode → Light or Mode → Dark

To apply a different style (rather than light/dark), use the same "Apply variable mode" control and pick your style from the Style collection.