# shadcndesign — full documentation
> shadcndesign is a design-to-code toolkit for shadcn/ui: a Figma component kit (2,000+ components, 8 styles), a Figma plugin that generates React/Tailwind code, Pro Blocks, Next.js templates, agent skills, themes, and an academy. One-time payment. This file inlines the complete product documentation.
Site index: https://www.shadcndesign.com/llms.txt · Blog posts as markdown: append .md to any post URL (see the index).
---
# Getting started
> Welcome to the Quick Start guide for shadcndesign! This page walks you through the basics of getting started with our Figma kit.
Canonical: https://www.shadcndesign.com/docs/getting-started
Once you open the file you've purchased, you are good to go and can start designing immediately.
There are two methods to get started depending on your needs and Figma plan.
## Figma free plan
If you have a free Figma account, you can [import the UI kit file to your drafts](https://help.figma.com/hc/en-us/articles/360041003114-Import-files-to-the-file-browser) and open it. You can start designing right away.
## Figma paid plan
You can also import the file to your drafts, move it to your [Figma workspace](https://help.figma.com/hc/en-us/articles/7576392133527-Guide-to-workspaces), and publish it as a library. The shadcn/ui kit for Figma can then be shared across your team and projects, ensuring consistency and efficiency in your design workflow. Publishing to your team library is optional.
## Before you publish the UI kit to your workspace
The kit includes all five icon libraries. Choose a single library and remove the rest to reduce your Figma file size — a smaller file loads faster and makes component search more responsive.
1. Choose your icon library and enable it. See the [icons documentation](/docs/icons) for instructions.
2. Open the Icons page.
3. In the `IconPlaceholder` component, delete the instances for any libraries you no longer need.
4. Delete the Figma pages associated with the removed libraries.
5. In the **Style** collection, delete the `icon-library/*` booleans for the libraries you removed.
## Publishing the UI kit to your workspace
Here's Figma's guide on [how to publish the UI kit to your workspace](https://help.figma.com/hc/en-us/articles/360025508373-Publish-a-library). To learn more about Figma libraries, check out the [official documentation](https://help.figma.com/hc/en-us/articles/360041051154-Guide-to-libraries-in-Figma).
### Key benefits of using the shadcn/ui kit as a library:
- **Consistency:** Maintain a unified design language across all your projects.
- **Efficiency:** Quickly access pre-built components and styles without recreating them.
- **Collaboration:** Easily share the UI kit with your entire team or organization.
- **Version control:** Update the main library to sync changes across all linked projects.
- **Flexibility:** Customize components in individual projects without affecting the main library.
## Learn Figma
If you're new to Figma, we highly recommend visiting its [Getting Started](https://help.figma.com/hc/en-us/categories/360002051613-Getting-Started) help page or watching the [Beginner's Guide to Figma](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4) on its YouTube channel.
### Components
The shadcn/ui kit for Figma is built with components — reusable elements that help you create and manage consistent designs across projects. You can learn more about components [here](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma).
### Variants
The UI kit uses Variants, which group and organize similar components into a single container. This simplifies the library and makes it easier to find what you need. [Here](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants) are more details on variants.
### Auto Layout
The system's components were built with Auto Layout, which lets designs grow to fill or shrink to fit and reflow as their contents change — just like on a real website. You can learn more about Auto Layout [here](https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties).
### Styles
The kit is built with Figma Styles, including text styles and effect styles, that can be reused across your designs. One file carries all 8 shadcn/ui styles as variable modes — see the [styles documentation](/docs/styles). Learn more about Figma Styles [here](https://help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma).
### Variables
The kit is built with variables — reusable values applied across design properties and prototyping actions. They save time when building designs and managing design systems. See our [variables documentation](/docs/variables) for how the kit organizes them, or learn more about Figma variables [here](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma).
---
# Styles
> Learn how the 8 shadcn/ui styles - Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra - work in our Figma kit, how to switch between them in one file, and how they relate to themes and light/dark.
Canonical: https://www.shadcndesign.com/docs/styles
The shadcn/ui kit for Figma ships all **8 official shadcn/ui styles in a single file**: Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra. You switch between them by changing one variable mode — no separate files, no duplicated pages.
## What are shadcn/ui styles?
In [shadcn/create](https://ui.shadcn.com/create), styles are presets that change the visual character of shadcn/ui components before you customize colors, typography, icons, or radius.
A style affects component spacing, sizing, radius, density, and proportions. It gives you a stronger starting point for a specific product direction. For example, one style may feel compact and sharp for data-heavy products, while another feels more spacious and approachable for marketing pages or modern SaaS interfaces.
## How styles work in the Figma kit
Every style lives in the same file as a **mode in the `Style` variable collection**. Switching that mode restyles the entire file at once:
- Per-style **control heights and paddings**
- **Radius ramps** — Sera and Lyra are square; Luma and Maia are round
- **Text sizes** and the type scale
- **Shadows** and focus-ring widths
- **Border treatments** — for example Mira's 2px borders, or Sera's underline-only inputs
Because components hug their content with bound minimum heights (rather than fixed heights), switching styles never leaves stale sizes behind. One file carries the whole system.
### How to switch styles
You can apply a style at the page/frame level or set it as the file default.
**For a page or frame:**
1. Select the page or frame in the Layers panel.
2. Click the **Change variables mode** icon.
3. Choose the **Style** collection.
4. Pick the style you want — Nova, Vega, Mira, Luma, Sera, Maia, Rhea, or Lyra.
Everything inside re-sizes, re-radiuses, and re-fonts to match, with no manual overrides.
**As the file default:** set the Style mode on your top-level pages so new frames inherit it. In practice you'll pick a style once at the start of a project, then customize colors, typography, icons, and radius on top of it.
You can also set the **default style from the plugin**: the [Figma to shadcn/ui plugin](/plugin)'s Create tab has a Style field — choosing one makes it the kit's default (first) Style mode, and decoding a shadcn/ui preset fills it automatically. Create's other fields apply your **theme** presets — colors, typography, icon library, radius — across all 8 styles at once, so whichever style is active already carries your settings.
## The 8 styles
Each style matches the corresponding preset in shadcn/create. All 8 are included in the same file, so you can preview any of them by switching the Style mode.
### Nova
Equivalent to the [Nova preset in shadcn/create](https://ui.shadcn.com/create?preset=b2fA). {/* TODO: verify preset URL */}
Nova is the default shadcn/ui style and the best starting point for most projects. Use it when you want the closest match to the official shadcn/ui component docs, a balanced density, and a familiar product UI foundation.
---
### Vega
Equivalent to the [Vega preset in shadcn/create](https://ui.shadcn.com/create?preset=bIkeymG). {/* TODO: verify preset URL */}
Vega is a strong choice when you want a slightly more distinctive interface while staying close to the shadcn/ui system. Use it for products that need a polished, modern feel without becoming too decorative.
---
### Mira
Equivalent to the [Mira preset in shadcn/create](https://ui.shadcn.com/create?preset=b1D0eCA4). {/* TODO: verify preset URL */}
Mira is denser and smaller than the default Nova style, with 2px borders. Use it for SaaS products, dashboards, admin panels, and data-heavy interfaces where you want more information visible on the screen.
---
### Luma
Equivalent to the [Luma preset in shadcn/create](https://ui.shadcn.com/create?preset=b1VlIttI). {/* TODO: verify preset URL */}
Luma is round and spacious. Use it when you want a softer, friendlier interface with more breathing room — especially for marketing pages, onboarding flows, and modern SaaS products.
---
### Sera
{/* TODO: re-shoot for 2026 kit — add Sera preview image */}
Sera is a distinctive, editorial style with square corners, underline-only inputs, and a strong typographic character. Use it when you want a design that reads more like a publication than a typical app. Open the Sera preview from the [Preview page](/preview) to compare it with the other styles.
{/* TODO: verify the /preview route exists (applies to the Sera/Maia/Rhea/Lyra links) */}
---
### Maia
{/* TODO: re-shoot for 2026 kit — add Maia preview image */}
Maia is round and approachable. Open the Maia preview from the [Preview page](/preview) to compare it with the other styles.
---
### Rhea
{/* TODO: re-shoot for 2026 kit — add Rhea preview image */}
Rhea is a balanced, modern style with borderless-at-rest fields. Open the Rhea preview from the [Preview page](/preview) to compare it with the other styles.
---
### Lyra
{/* TODO: re-shoot for 2026 kit — add Lyra preview image */}
Lyra is square and minimal. Open the Lyra preview from the [Preview page](/preview) to compare it with the other styles.
---
## Styles, themes, and light/dark
These three axes are independent, and understanding how they combine is the key to the kit:
- **Style** (Nova…Lyra) defines the **structure** — spacing, sizing, radius, density, borders, shadows, and the type scale. Set it via the `Style` collection mode.
- **Theme** defines the **colors, fonts, and radius values**. You customize a theme by editing the `color/light/*` and `color/dark/*` pairs in the Style collection. See the [theming documentation](/docs/theming).
- **Light/dark** is the `Mode` collection (Light or Dark). It picks the light or dark half of whatever theme is active.
Because color tokens resolve through the active style, a theme edit can be applied to a single style or across all 8. And because Typeset colors reuse the same theme tokens, prose content follows the active style and light/dark automatically.
## How to get started with presets and styles
### Code
1. Pick your style in [shadcn/create](https://ui.shadcn.com/create). All 8 styles are supported.
2. Adjust your colors, typography, icon library, and radius.
3. Click **Get code** and install the generated setup in your project.
### Figma
1. Open the Figma kit. You can set the style in the next step from the plugin, or set the **Style** mode by hand.
2. Open our [Figma to shadcn/ui plugin](/plugin) and use the Create tab — decode your preset (it fills the Style field too) or pick your style, colors, typography, icon library, and radius by hand.
3. Start designing with a Figma kit and shadcn/ui project that share the same style foundation.
---
## FAQ
### Are styles the same as themes?
No. Styles define the component structure and visual density — spacing, sizing, proportions, radius, borders, and shadows. Themes define colors, typography, and radius values you customize on top of a style. See "Styles, themes, and light/dark" above.
### Can I switch styles inside one Figma kit file?
Yes. All 8 styles are modes in the `Style` collection. Switch the mode on a page or frame — or make a style the kit default via the plugin's Create tab — and the whole design restyles.
### Which styles are included?
All 8 — Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra — ship in the single Pro kit file, included in the Plus and Premium packages. The Basic package includes the Nova style only.
---
# Variables
> The shadcn/ui kit for Figma comes pre-configured with a comprehensive set of variables for colors, spacing, radius, typography, and widths. These variables ensure consistency and flexibility in your designs, and let a single file carry all 8 shadcn/ui styles.
Canonical: https://www.shadcndesign.com/docs/variables
The shadcn/ui kit for Figma comes pre-configured with a comprehensive set of variables for colors, spacing, radius, typography, and widths. These variables ensure consistency and flexibility in your designs.
Our UI kit leverages [Figma variables](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma) and [styles](https://help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma) to mirror the official shadcn/ui framework, which is based on [Tailwind CSS](https://tailwindcss.com/docs/styling-with-utility-classes) v4.
## One file, 8 styles
The kit ships **all 8 shadcn/ui styles in a single file** — Nova, Vega, Mira, Luma, Sera, Maia, Rhea, and Lyra. Switching the active style restyles the entire file: heights, paddings, radius ramps, text sizes, shadows, focus rings, and border treatments all update at once. Four variable collections make that possible: `Tailwind`, `Style`, `Mode`, and `Typeset`.
## Variable collections
The **Basic version** of the UI kit organizes variables into four collections that control different aspects of your design system. The **Pro version** (with Pro Blocks) adds a `pro-blocks/*` variable group inside the Style collection.
| Collection | Modes | What it holds |
| ---------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Tailwind` | Value | Tailwind CSS v4 primitives: the color palette, spacing, radius, widths, opacity, line-height, and more. |
| `Style` | Nova, Vega, Mira, Luma, Sera, Maia, Rhea, Lyra (8) | Everything that differs per style: the light/dark color source, fonts, radius ramp, type scale, shadows, per-component structure values, and icon-library switches. Change the mode to restyle the whole file. |
| `Mode` | Light, Dark | The shadcn/ui semantic tokens with their exact CSS names, plus alpha helpers and the semantic `custom/*` tokens. Use these directly in your designs. |
| `Typeset` | 14px, 15px, 16px, 18px | The prose/markdown system that mirrors shadcn's typeset.css. See the [Typeset documentation](/docs/typeset). |
### How the collections resolve
Colors flow through the collections in a one-way chain — each layer only ever points at the next:
- **Kit components bind `component/*` variables** in the Style collection (`component/input/bg`, `component/badge/text`, …). This per-component layer is what lets one component diverge per style without touching any other.
- **`component/*` values alias Mode tokens** (`background`, `primary`, `custom/field`, …). The Mode collection is a pure switch: Light points at the Style collection's `color/light/*` definitions, Dark at `color/dark/*`. No color values live in Mode itself.
- **The Style collection is where the theme is defined, and it holds no raw colors either.** Each base `color/light/{token}` + `color/dark/{token}` pair (`background`, `primary`, `border`, `chart-1`, and so on) aliases a Tailwind palette variable per style. The `custom/*` and `alpha/*` groups under `color/light|dark/*` are aliases with opacity: each points at a base token (or, where none fits, at a Tailwind variable) and adds a percentage, so `custom/primary-muted` is literally `primary` at 5%. Only the shadow color variables (`shadow/*`, `inset-shadow/*`, `drop-shadow/*`) and six `custom/*` tokens with no matching base are stored as literal values.
In your own designs, bind **Mode tokens** (including `custom/*`) — they carry the exact shadcn/ui CSS names, and the active Style mode plus the Light/Dark switch do the rest. In practice: bind a field surface to `custom/field`, and switching the frame's Style mode or Light/Dark mode recolors it correctly — no manual work.
### 1. Tailwind
The Tailwind collection contains standard Tailwind CSS colors and utility primitives. It has a single value mode and rarely needs editing directly — it's the palette everything else references. Since kit 3.0 the palette matches Tailwind CSS v4: every `colors/*` step holds the sRGB hex equivalent of Tailwind v4's oklch definition (for example `colors/red/500` is `#fb2c36` and `colors/neutral/400` is `#a1a1a1`). Earlier kits carried the Tailwind v3 hex palette.
**Use Tailwind variables to:**
- Reference Tailwind colors from the Style collection's color pairs
- Apply Tailwind colors directly to components
- Control component spacing, widths, radius, and border width
- Set opacity values
| Variable Group | Usage | Example |
| ---------------------- | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| `colors/{hue}/{shade}` | The Tailwind CSS v4 color palette: 26 families × 11 steps (`slate`, `gray`, `zinc`, `neutral`, `stone`, `taupe`, `mauve`, `olive`, `mist`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`), plus `black`, `white`, and `transparent` | Elements using `colors/blue/500` will use `text-blue-500` or `bg-blue-500` in code |
| `spacing/*` | Apply to padding, margins, and gaps | A component with `spacing/4` in padding maps to the `p-4` class in code |
| `rounded/*` | Apply rounded corners — each step aliases the active style's `radius/*` ramp in the Style collection | An element with `rounded/lg` maps to `rounded-lg` in code |
| `border-width/*` | Set border thickness | An element with `border-width/2` maps to `border-2` in code |
| `min-width/*` | Set minimum width constraints | An element with `min-width/min-w-3xs` maps to `min-w-3xs` in code |
| `max-width/*` | Set maximum width constraints | An element with `max-width/max-w-3xl` maps to `max-w-3xl` in code |
| `opacity/*` | Control transparency | An element with `opacity/opacity-70` maps to `opacity-70` in code |
| `stroke-width/*` | Icon and vector stroke widths | Used inside icon components |
| `ring-width/*` | Focus-ring widths | Referenced by the Style focus-ring values |
| `breakpoint/*` | Define breakpoints | A frame with `breakpoint/sm` in max width defines styling for the `sm:…` prefix |
### 2. Style
The Style collection is the heart of the kit. It has **eight modes** — one per shadcn/ui style — and holds everything that differs between them. Switch the mode on a page or frame (or set the file default) to restyle everything bound to it.
This is also where you **recolor a theme**: edit the `color/light/*` and `color/dark/*` pairs. See the [theming documentation](/docs/theming) for the full workflow.
| Variable Group | Purpose |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `color/light/{token}` + `color/dark/{token}` | The theme source. The base tokens (the shadcn semantic set) alias a Tailwind palette variable per style; the `custom/*` and `alpha/*` groups are aliases with opacity that point at those base tokens, so every tint follows when you re-point a base. Each pair feeds one Mode token; recolor your theme here rather than binding these to components directly. |
| `font/family/{sans,serif,mono,heading}` | Typefaces for the whole file. Change once, applies everywhere. |
| `radius/{xs…4xl}` | The per-style radius ramp (Sera and Lyra are square; Luma and Maia are round). Components reference it through the Tailwind collection's `rounded/*` aliases. |
| `text/*` | The per-style type scale: size and default line-height per ramp step, plus computed `lh-tight`…`lh-loose` steps matching Tailwind's `leading-*` scale. |
| `font-weight/{thin…black}` | The font-weight scale, referenced by text styles and per-component weight values. |
| `container/*` + `breakpoint/*` | Container widths (3xs–7xl) and responsive breakpoints matching Tailwind's scale. |
| `shadow/*`, `inset-shadow/*`, `drop-shadow/*`, `blur/*` | Effect primitives and per-component shadow slots, referenced by the kit's effect styles (along with `focus-ring/width`). Shadow colors are stored as literal black at an opacity, not as aliases. |
| `component/{name}/*` | Structural values (heights, paddings, gaps, radii, border widths) **and per-component color bindings** that alias Mode tokens — the layer the kit's components are actually bound to. |
| `icon-library/{lucide,huge,phosphor,tabler,remix}` | Boolean switches for the active icon set — set exactly one to `true`. See the [icons documentation](/docs/icons). |
| `pro-blocks/{desktop,mobile}/*` | Layout values for the Landing Page Pro Blocks (Pro version only). |
| `meta/style-name` | The name of the active style, for reference. |
| `meta/version` | A hidden marker identifying the kit version (`3.0` for the September 2026 kit). It powers the plugin's auto-detection and tells it which defaults to use. Never edit it. |
#### Pro Blocks variables (Pro version)
The `pro-blocks/*` group inside the Style collection provides the layout and typography values used by the Landing Page Pro Blocks. Variables are split into `pro-blocks/desktop/*` and `pro-blocks/mobile/*` so you can define distinct values per breakpoint, and you can use them as a foundation for your own section styles.
| Variable | Description |
| --------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `container-padding-x` | X-axis padding for Pro Block containers (desktop and mobile) |
| `section-padding-y` | Y-axis padding for Pro Block sections (desktop and mobile) |
| `section-title-gap-{sm,md,lg,xl}` | Y-axis gap for section-title wrappers, one per heading size (desktop) |
| `heading-{sm,md,lg,xl}/*` | Typography for the Pro Blocks heading styles: `font-size`, `line-height`, `letter-spacing`, and `font-weight` per heading size (desktop and mobile) |
### 3. Mode
The Mode collection holds the shadcn/ui semantic color tokens that switch between light and dark. **Use these directly in your UI designs and components.** They carry the exact CSS variable names from shadcn/ui, so the mapping to code is one-to-one. The collection holds no color values of its own — every token aliases its `color/light/*` or `color/dark/*` definition in the Style collection, making Mode a pure light/dark switch.
Use alpha variables for fills and strokes that need transparency.
| Variable Group | Usage | Example |
| --------------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| Semantic tokens | Flat shadcn/ui color variables | A frame with the `background` variable maps to `bg-background` in code |
| `alpha/*` | Transparent overlay steps: `alpha/5`, `10`, `20`, `30`, `40`, `50`, `60`, `80`, `90`. In Figma each step is `background` at (100 - N)% opacity: `alpha/90` is `background` at 10%, `alpha/5` is `background` at 95% | A fill using `muted` plus `alpha/90` maps to `bg-muted/90` in code |
| `custom/*` | Semantic helper tokens for states and surfaces shadcn builds with utility combinations (see below) | A field surface using `custom/field` maps to the recipe in its variable description |
#### Semantic color tokens
Each semantic token has a specific purpose in shadcn/ui:
| Variable | Purpose |
| ---------------------------- | -------------------------------------------------------------- |
| `background` | Main application background |
| `foreground` | Primary text color on the background |
| `card` | Card component background |
| `card-foreground` | Text and icons within cards |
| `popover` | Background for dropdown menus and popovers |
| `popover-foreground` | Text and icons within popovers |
| `primary` | Brand color for primary actions (buttons, highlights) |
| `primary-foreground` | Text and icons on primary-colored elements |
| `secondary` | Less prominent action color |
| `secondary-foreground` | Text and icons on secondary-colored elements |
| `muted` | Subdued background for less important elements |
| `muted-foreground` | De-emphasized text (captions, labels) |
| `accent` | Highlight color for active or focused elements |
| `accent-foreground` | Text and icons on accent-colored elements |
| `destructive` | Error and deletion action color |
| `border` | Default border color |
| `input` | Form input and button borders |
| `ring` | Focus indicator color |
| `ring-offset` | Focus ring offset color (matches the surface the ring sits on) |
| `chart-1` through `chart-5` | Data visualization colors |
| `sidebar` | Sidebar background |
| `sidebar-foreground` | Text and icons within the sidebar |
| `sidebar-primary` | Primary actions within the sidebar |
| `sidebar-primary-foreground` | Text on sidebar primary elements |
| `sidebar-accent` | Highlighted elements within the sidebar |
| `sidebar-accent-foreground` | Text on sidebar accent elements |
| `sidebar-border` | Sidebar divider lines or borders |
| `sidebar-ring` | Focus indicators within the sidebar |
#### Semantic custom tokens
shadcn/ui builds many states and surfaces out of utility combinations rather than single tokens — for example a disabled field is `disabled:bg-input/50 dark:disabled:bg-input/80`. The kit captures those combinations as **semantic `custom/*` tokens** so you can bind one variable and get the correct value in every style and both modes.
Since kit 3.0 these tokens are built with Figma's **alias with opacity**. In the Style collection, each `color/light|dark/custom/*` value points at a base token and adds a percentage instead of storing a flattened color: `custom/primary-muted` is literally `primary` at 5%, `custom/focus-ring` is `ring` at 50% (30% in some styles), `custom/menu-border` is `foreground` at 10%. Where no base token matches, the reference points at a Tailwind variable (dark `custom/field` is `colors/white` at 5%), and fully transparent values alias `colors/transparent`. The practical effect: re-point `primary` to another color and every primary tint (`primary-muted`, `primary-hover`, `selected-wash`, and the rest) follows in all 8 styles, with nothing to recompute.
The recipes below show the Nova defaults — where a style diverges (for example Sera's transparent fields), the per-style recipe is in the variable's description in Figma.
| Token | Purpose | Code recipe |
| ------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------- |
| `custom/field` | Input, textarea, and select surface | `dark:bg-input/30` |
| `custom/control` | Outline button and bordered trigger surface | `bg-background dark:bg-input/30` |
| `custom/control-hover` | Outline button/trigger hover surface | `hover:bg-muted dark:hover:bg-input/50` |
| `custom/field-border` | Resting field border | `border-input` |
| `custom/field-disabled` | Disabled field wash | `disabled:bg-input/50 dark:disabled:bg-input/80` |
| `custom/switch-track` | Switch unchecked track | `data-unchecked:bg-input dark:data-unchecked:bg-input/80` |
| `custom/muted-hover` | Ghost button hover | `hover:bg-muted dark:hover:bg-muted/50` |
| `custom/muted-subtle` | Subtle muted wash (card footer, table row hover) | `bg-muted/50` |
| `custom/selected-wash` | Selected/checked row background | `has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10` |
| `custom/primary-muted` | Subtle primary tint (selected rows, kbd) | `bg-primary/5 dark:bg-white/10` |
| `custom/primary-border` | Checked-control border (switch, checkbox) | `border-primary/30 dark:border-primary/20` |
| `custom/destructive-muted` | Tinted destructive button/badge background | `bg-destructive/10 dark:bg-destructive/20` |
| `custom/destructive-muted-hover` | Hover for tinted destructive elements | `hover:bg-destructive/20 dark:hover:bg-destructive/30` |
| `custom/destructive-muted-foreground` | Secondary destructive text | `text-destructive/90` |
| `custom/destructive-border` | Invalid/destructive field border | `aria-invalid:border-destructive dark:aria-invalid:border-destructive/50` |
| `custom/destructive-ring` | Invalid focus ring | `aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40` |
| `custom/focus-ring` | Focus halo color (alpha varies per style) | `ring-ring/50` |
| `custom/menu-border` | Hairline border on menus, cards, popovers | `ring-1 ring-foreground/10` |
| `custom/menu-glass` | Frosted menu background | `bg-popover/70 backdrop-blur-2xl` |
| `custom/warning-foreground` | Warning text (amber — no shadcn warning token exists) | Amber foreground |
| `custom/warning-background` | Warning surface | Amber background |
| `custom/warning-border` | Warning border | Amber border |
The kit ships 60 `custom/*` tokens in total. Beyond the ones listed above,
they cover component details — hovers (`primary-hover`, `secondary-hover`,
`tinted-hover`, `bubble-outline-hover`, `bubble-ghost-hover`,
`badge-text-hover-muted`), controls and menus (`control-border`,
`control-strong`, `control-wash`, `menu-border-subtle`, `menu-border-faint`,
`menu-separator`), rings (`ring-faint`, `focus-ring-soft`, `ring-chart`,
`ring-chart-strong`), washes and overlays (`overlay`, `kbd-overlay`,
`foreground-wash`, `muted-foreground-wash`, `border-soft`, `tinted`,
`selected-wash`), per-component tokens (`accordion-active-bg`,
`active-tab-border`, `calendar-surface`, `calendar-accent`, `slider-thumb`,
`toggle-group-shadow`, `track-strong`, `drawer-border`, and the switch
family), and extra destructive variants (`destructive-strong`,
`destructive-wash`, `destructive-border-soft`, `destructive-border-strong`).
Each carries its exact utility recipe in its Figma description, and each is an
alias with opacity on a base token, so it follows that base automatically. The
only exceptions are six literal values that have no matching base:
`secondary-hover` and `tinted-hover` in both modes, and `tinted` and
`destructive-ring` in dark mode.
### 4. Typeset
The Typeset collection powers the prose/markdown system and has four size modes (14px, 15px, 16px, 18px). It's covered in full in the [Typeset documentation](/docs/typeset).
### Best practices
- Maintain consistency by using variables rather than hard-coded values.
- Use Mode tokens (including `custom/*`) for anything that should adapt to light/dark and to the active style.
- Recolor themes in the Style collection's `color/light/*` and `color/dark/*` pairs, not on individual components.
- Never enter raw color values anywhere in the chain. Base `color/light/*` and `color/dark/*` pairs alias Tailwind palette variables, Mode tokens alias the Style pairs, and `component/*` variables alias Mode tokens. If a color you need is missing from the palette, add it to the Tailwind collection first and alias it from there.
- For a tint, do not flatten it into a hex value. Alias the base token (`primary`, `ring`, `background`) and set the opacity percentage in the variable panel, the same way the kit's `custom/*` and `alpha/*` tokens are built. The tint then follows every recolor.
- When extending the kit, follow the chain: define the color in the Style collection (`color/light/*` + `color/dark/*`, as aliases to Tailwind palette variables), expose it as a Mode token, and bind components to a `component/*` variable that aliases it.
- Reference the right collection for the job:
- **Tailwind** for the raw palette and utility primitives
- **Style** for per-style structure, fonts, radius, and the theme color source
- **Mode** for theme-aware component colors
- **Typeset** for prose and long-form text
By following these guidelines, your designs will translate cleanly to shadcn/ui and Tailwind CSS.
## Limitations and differences compared to Tailwind CSS
While we've made every effort to translate the Tailwind CSS system into Figma variables, there are inherent limitations in the current Figma implementation. Understanding these differences will help you work more effectively with our UI kit.
### Math equations
**Tailwind CSS:** Uses a spacing variable as a base unit for calculations. For example, `p-4` equals `(--spacing) * 4 = 16px`.
**Figma:** Math operations are not yet supported in Figma variables. As a result, all spacing and size values in our UI kit are implemented as fixed pixel values rather than calculated ones.
### Color spaces
**Tailwind CSS v4:** Uses the OKLCH color space for improved color perception and manipulation.
**Figma:** OKLCH is not yet supported in Figma variables. The kit stores each palette step as the sRGB hex equivalent of Tailwind v4's oklch definition (since kit 3.0; earlier kits used the Tailwind v3 hex palette), so the colors match what Tailwind renders while staying compatible with Figma. When you export with our plugin you can still choose OKLCH, HSL, or RGB output — see the [plugin documentation](/docs/plugin).
### Opacity modifiers
**Tailwind CSS:** Derives tints from a token with an opacity modifier, for example `bg-primary/5` or `ring-ring/50`.
**Figma:** The kit expresses the same thing with Figma's alias with opacity: a variable that points at another color variable and adds a percentage. `custom/*` and `alpha/*` tokens, and the base tokens that carry transparency (dark `border` is `colors/white` at 10%), are built this way, so they follow their base automatically. On export, the plugin flattens each of them into a literal color (for example `--primary-muted: oklch(0.205 0 0 / 0.05)`), so the CSS output looks the same as before.
### Typography variables
**Tailwind CSS:** Offers leading (line-height) and tracking (letter-spacing) variables with percentage and em-based values.
**Figma:** Percentage values are not currently supported in Figma variables, so the kit pre-computes line-heights to pixels: each type step in the Style collection carries its default line-height (`text/{step}/lh`) plus `lh-tight`…`lh-loose` steps matching Tailwind's `leading-*` scale, already multiplied out per style. Text styles bind these pixel values. Letter-spacing (tracking) remains handled inside text styles.
#### Working with these limitations
Despite these constraints, our UI kit provides a robust design system that closely mirrors Tailwind CSS. When designing:
- Use the predefined spacing variables even though they're fixed values.
- Apply color variables consistently, knowing they'll translate correctly to code.
- Use text styles for typography rather than trying to recreate Tailwind's typography variables directly.
These workarounds ensure your designs translate smoothly to code, even with the current limitations of Figma variables.
---
# Typeset
> Typeset is the prose and markdown system in the shadcn/ui kit for Figma, mirroring shadcn's typeset.css. It gives long-form content consistent headings, paragraphs, lists, and measures that track your active style and light/dark mode.
Canonical: https://www.shadcndesign.com/docs/typeset
Typeset is the kit's system for **long-form and markdown content** — the paragraphs, headings, lists, quotes, and tables you'd write in an article, a docs page, or an AI-generated response. It mirrors shadcn's [typeset.css](https://ui.shadcn.com/typeset) so your Figma prose and your rendered `.typeset` content match.
## What it is
Everyday UI text (labels, buttons, captions) uses the kit's regular text styles. Typeset is different: it styles **flowing prose** as a unit, with sensible defaults for reading — comfortable line-height, spacing between blocks, and a bounded line length. It ships as a dedicated Typeset page in the kit with ready-made markdown components and a Rich Text composite you can drop content into.
Because Typeset colors reuse the same theme tokens as the rest of the kit, prose **follows light/dark and restyles with the active style automatically** — no separate theming.
## Size modes
The `Typeset` variable collection has four size modes — the builder's size knob:
- **14px**
- **15px**
- **16px**
- **18px**
Switching the Typeset mode on a page or frame scales the whole prose system to that base size. Defaults: line-height (leading) `1.75` and block flow (spacing between blocks) `1.25em`.
## Variables
The Typeset collection holds the values that drive the system:
| Variable Group | Purpose |
| -------------- | ------- |
| `size/*` | The prose type scale for each size mode |
| `space/*` | Block spacing (the flow between paragraphs, headings, lists, and other blocks) |
| `measure/{60,70,80,90}ch` | Line-length caps — the maximum width a column of prose should reach, in characters |
| `font/*` | The fonts used for prose |
## Components and text styles
The Typeset page provides markdown components covering the elements you'd expect in prose:
- Headings
- Paragraphs
- Lists (including task lists)
- Blockquote
- Code and preformatted (`code` / `pre`) blocks
- Table
- Horizontal rule
- Figure
There's also a **Rich Text** composite that combines these into a ready-made article layout.
Under the hood, these use the `typeset/*` text styles, which bind to the Typeset collection's variables. Apply a `typeset/*` text style (or use the components) rather than styling prose by hand.
## Measures
Readable prose has a bounded line length. The kit exposes `measure/60ch`, `measure/70ch`, `measure/80ch`, and `measure/90ch` as width variables — apply one to a prose container to cap how wide the text runs. In code these map to the `.typeset` container's `measure-*` classes.
## How it tracks style, theme, and light/dark
Typeset sits on top of the same system as the rest of the kit:
- **Style:** the active `Style` mode influences the prose fonts and scale, so Typeset restyles when you switch styles.
- **Theme:** prose colors reuse your theme's Mode tokens (`foreground`, `muted-foreground`, `border`, and so on), so a theme edit flows through automatically.
- **Light/dark:** switching the `Mode` collection flips prose colors along with everything else.
You set the base size independently with the Typeset mode (14/15/16/18px).
## Exporting and importing with the plugin
The [Figma to shadcn/ui plugin](/plugin) has a dedicated **Typeset** tab with its own Export and Import tabs — see the [plugin Typeset documentation](/docs/plugin-typeset) for the full workflow:
- **Export** produces a `typeset.css` override block (`--typeset-size`, `--typeset-leading`, `--typeset-flow`, and `--typeset-font-*`) from your chosen size mode, including any values you hand-tuned.
- **Import** takes a pasted `typeset.css` back into the kit — switching or creating size modes and applying leading, flow, and fonts.
Typeset export and import run locally and don't consume any AI credits or plugin uses.
When the plugin's AI code generation processes a prose frame, it outputs a `.typeset` container with the matching `measure-*` classes — so designed prose becomes correctly structured markup.
---
# Theming
> The shadcn/ui kit for Figma is designed to let designers apply their project's brand styling in minutes, and to give developers straightforward access to that styling for seamless application to shadcn/ui code.
Canonical: https://www.shadcndesign.com/docs/theming
## How theming works
A theme is the set of **colors, fonts, and radius values** layered on top of a style. You customize it by editing the color pairs in the **Style** collection — not on individual components. Because colors resolve through the active style, one edit updates every component that uses that token, in the right style and the right light/dark mode.
The three axes stay independent:
- **Style** (Nova…Lyra) — structure and density. See [styles](/docs/styles).
- **Theme** — the `color/light/*` + `color/dark/*` color pairs, fonts, and the radius ramp, all in the Style collection.
- **Light/dark** — the `Mode` collection (Light or Dark). It never holds colors of its own — it only switches between the Style collection's light and dark definitions.
**Important:** Make sure your main library file is open — the shadcn/ui kit Figma file where all your components live.
## Editing your theme colors
You recolor a theme by editing the `color/light/{token}` and `color/dark/{token}` pairs in the Style collection. Each base pair aliases a Tailwind palette variable (the kit ships on the `neutral` family, with `destructive` on `red`). The `custom/*` and `alpha/*` tints under the same `color/light|dark/*` groups are aliases with opacity that point at those base tokens (`custom/primary-muted` is `primary` at 5%), so whatever you set a base token to, its tints follow in that style. There is nothing to recompute.
You can make an edit for **one style** (change the pair only in that style's mode) or **across all 8 styles** (change it in every mode).
### Changing the primary color
#### Method 1: Use a Tailwind color
To change the primary color from Neutral to Blue:
1. Open the variables panel.
2. Switch to the **Style** collection.
3. Find `color/light/primary` and click its value field.
4. Select the `colors/blue/600` variable from the Tailwind collection.
5. Find `color/dark/primary` and set it to `colors/blue/600` as well.
After a moment, Figma updates the primary color for every component in that style. Every primary tint (`custom/primary-muted`, `custom/primary-hover`, `custom/selected-wash`, `custom/primary-border`) follows automatically, because those tokens are `primary` at a percentage rather than stored colors.
#### Method 2: Use a custom color
To change the primary color to a custom purple (#7C3AED):
1. Open the variables panel and switch to the **Style** collection.
2. Find `color/light/primary`, unlink its current value, and enter `#7C3AED`.
3. Find `color/dark/primary`, unlink its value, and enter `#7C3AED`.
This still works in kit 3.0: the primary tints alias `color/light/primary` and `color/dark/primary` themselves, so they pick up the purple too. If you plan to reuse the color elsewhere, the cleaner option is to add it to the Tailwind collection first (for example `colors/brand/600`) and alias it from the pair, which keeps every color in the file traceable to the palette.
### Changing neutral colors
The kit itself ships on the `neutral` family: `background`, `foreground`, `card`, `popover`, `secondary`, `muted`, `accent`, `border`, `input`, `ring`, and the `sidebar-*` tokens alias `colors/neutral/50` through `colors/neutral/950` (plus `colors/white` and `colors/black`). One exception is kept on zinc: light `muted-foreground` aliases `colors/zinc/500`.
To move to Slate, Stone, Zinc, or another family, re-point those `color/light/*` and `color/dark/*` pairs in the Style collection to the same step of the new family (for example `colors/neutral/200` to `colors/slate/200`). Do it in one style's mode or in all eight. The neutral tints in `custom/*` and `alpha/*` follow, since they are aliases with opacity on these base tokens. Tokens built from `colors/white` or `colors/black` at an opacity (dark `border` is `colors/white` at 10%, dark `input` is `colors/white` at 15%) are family-independent and need no change.
### Changing the font family
Fonts are set once for the whole file. The defaults are **Inter** (sans and heading) and **Geist Mono** (mono).
1. Open the variables panel and switch to the **Style** collection.
2. Find the `font/family/*` variables (`sans`, `serif`, `mono`, `heading`).
3. Change the value to your preferred font (for example, `sans` to Roboto).
Enter the font family name exactly. The change applies file-wide.
### Changing border radius
Radius is controlled by the per-style ramp `radius/xs…4xl` in the Style collection. Each style has its own ramp (Sera and Lyra are square; Luma and Maia are round). Components reference the ramp through the Tailwind collection's `rounded/*` aliases, so editing the ramp here restyles everything bound to it.
1. Open the variables panel and switch to the **Style** collection.
2. Find the `radius/*` ramp for the style you're editing.
3. Adjust the ramp steps to make components more or less rounded.
| Variable | Purpose |
| ----------- | ---------------------------------------------------------------------- |
| `radius/sm` | Subtle rounding on compact elements like tags, chips, and small badges |
| `radius/md` | Buttons, inputs, cards, and most common UI elements |
| `radius/lg` | Prominent elements like modals, larger cards, and feature sections |
| `radius/xl` | Very prominent elements, floating panels, and heavier rounding |
### Using an inverted menu color
In shadcn/create you can invert menu color so select and dropdown menus appear dark in light mode. To do the same in the kit:
1. Open the Dropdown Menu component.
2. Select the `DropdownMenu / Menu` component.
3. In the Appearance panel, set its Mode to `Dark`.
## Creating a custom theme
A custom theme is a **new mode in the Style collection**, based on any of the 8 built-in styles. This keeps your brand theme alongside the built-ins, so you can switch to it like any other style.
### The fast way: import from globals.css
The quickest path is the [Figma to shadcn/ui plugin](/plugin):
1. Copy your theme's `globals.css` (for example from our [Theme Generator](/theme-generator) or an existing project).
2. Open the plugin and go to the Import tab.
3. Choose **Add as a new style**, and pick which of the 8 styles to base it on (default Nova).
4. Paste the CSS and import. The plugin creates a new Style-collection mode with your colors, radius, and fonts applied.
Your brand theme now appears as a mode you can switch to on any page or frame. See the [themes documentation](/docs/themes) for the full import walkthrough.
### The manual way: add a Style mode
You can also add a mode by hand:
1. Open the Local variables panel and select the **Style** collection.
2. Click **+** in the modes header to add a new mode.
3. Rename it (for example, "Brand A" or "High Contrast").
4. Adjust the `color/light/*`, `color/dark/*`, `font/family/*`, and `radius/*` values to match your brand.
Figma limits variable modes per collection by plan, and the Style collection
already ships with 8 modes. Adding a 9th may only be possible on plans with a
higher mode limit — if adding a mode isn't available on your plan, overwrite
one of the built-in styles instead (duplicate the file first to keep a
pristine copy).{" "}
{/* TODO: verify current Figma per-plan mode limits and state them precisely */}
### Adding a new color variable
If your brand truly needs a token that shadcn/ui doesn't have, add it consistently:
1. Add `color/light/{name}` and `color/dark/{name}` to the Style collection, each aliasing a Tailwind palette variable (add the color to the Tailwind collection first if the palette lacks it).
2. Add `{name}` (or `custom/{name}`) to the Mode collection, referencing the light/dark pair.
3. For a tint of it (a hover wash, a muted background), add `color/light/custom/{name}-muted` and its dark pair, alias the base token, and set the opacity percentage in the variable panel. This is Figma's alias with opacity, the same mechanism the kit's own `custom/*` tokens use, so the tint follows the base if you recolor later. Do not enter a flattened color.
4. Set the variable's scope so it appears where you need it.
5. Use it in components.
6. Export it to your `globals.css` with the [Figma to shadcn/ui plugin](/plugin).
Before adding new variables, check the existing shadcn/ui and `custom/*` tokens in the [variables documentation](/docs/variables) — most needs are already covered, and unnecessary variables complicate a design system.
## Working with text and effect styles
Typography and effects are delivered as Figma **styles** that reference the Style collection's variables.
- **Text styles** cover the full ramp, including mono and heading variants, using the `font/family/*`, `font-weight/*`, and `text/*` variables (sizes and pixel line-heights, including the `lh-tight`…`lh-loose` leading steps). Create a new one by styling a text element with those variables and saving it as a text style.
- **Focus rings and shadows are effect styles** (`focus/*` and `shadow/*`) with variables bound inside them. Apply the effect style to a component rather than rebuilding the effect by hand.
For long-form and markdown content, the kit also provides the Typeset system — see the [Typeset documentation](/docs/typeset).
## Dark mode
Switching between light and dark is a `Mode` collection change.
### How it works
The kit ships Light and Dark modes in the `Mode` collection. Every `custom/*` and semantic token already carries both halves, so a single switch flips the whole design.
### How to use
1. Select any page or frame.
2. Click the **Change variables mode** icon in the Layers panel.
3. Choose the **Mode** collection.
4. Select **Light** or **Dark**.
## Multi-brand design systems
To maintain several brand themes in one file, add a mode per brand in the **Style** collection (as in "Creating a custom theme" above), then switch between them:
1. Select any page or frame.
2. Click the **Change variables mode** icon.
3. Choose the **Style** collection.
4. Select your brand mode (for example "Brand A").
Each brand keeps the full component structure while carrying its own colors, fonts, and radius.
---
# Components
> The shadcn/ui Figma kit provides a comprehensive set of components that mirror the official shadcn/ui framework. This section covers how to work with these components effectively, from basic editing to creating new variants and preparing for developer handoff.
Canonical: https://www.shadcndesign.com/docs/components
For the full list of components in the kit, with a Figma preview and a link to the React docs for each one, see the [shadcn/ui components library](/components).
{/* TODO: verify for 2026 kit */}
## Editing components
The shadcn/ui components are styled with Tailwind CSS classes. In our Figma kit, components are built from variables in the `Tailwind` collection (spacing, radius, widths) and per-component `component/*` values from the `Style` collection — including their colors, which resolve through the `Mode` collection's semantic tokens to the active style's palette. This lets you make consistent, systematic changes across your design system.
Controls **hug their content with a bound minimum height** rather than a fixed
height — so switching styles never leaves a stale size behind. When you place
or resize a control instance, set its width with Auto Layout (Fill or Hug) and
let the height follow its content. Avoid manually resizing a control's height;
if one ever looks wrong, set its vertical resizing back to Hug to clear the
override.
Repeating regions (menu items, list rows, card bodies) ship as **empty slots**
— add your own content into them. Many components also expose **text and
boolean properties** (for example "Show icon" or a title text field) in the
Figma properties panel, so you can configure a component without detaching it.
Reach for these props before overriding layers by hand.
### Example: editing the Badge component
Suppose we want the Badge component to use different padding and border radius.
#### Figma
1. Go to the Badge page in the main library.
2. Find the `Badge / Text` component in the Components section.
3. Select the Badge frame inside. Note: you may need to select the Badge frame in the Focus state due to a different component construction.
4. Change the horizontal padding to a different `spacing/*` variable (for example from `spacing/2` = 8px to `spacing/3` = 12px). Control paddings are often bound to per-style `component/*` values from the Style collection — in that case edit the `component/badge/*` value there instead, which updates the padding for that style everywhere.
5. Change the border radius from `rounded/md` (6px) to `rounded/full`.
6. Leave a comment for the developer describing your changes. For example:
```
@DeveloperName I made some changes to this component:
- changed the horizontal padding from 2 to 3
- changed the border-radius from rounded-md to rounded-full
```
#### Implementation in code
1. Locate the `ui/badge.tsx` file.
2. Replace the `px-2` class with `px-3`.
3. Replace the `rounded-md` class with `rounded-full`.
4. Save and preview your changes.
This mapping between Figma variables and Tailwind classes creates a seamless workflow from design to implementation.
## Adding new component variants
Creating new variants extends the shadcn/ui system while keeping consistency with the existing design language. This example adds a "Warning" variant to the Button component in both Figma and code.
### Example: a warning button variant
1. The kit ships `custom/warning-foreground`, `custom/warning-background`, and `custom/warning-border` in the Mode collection (amber — shadcn/ui has no built-in warning token), so warning tokens are already available.
2. Go to the Button page in the main library.
3. Expand the Components section and the Button frame for room to work.
4. Select and duplicate (Cmd + D) the Destructive button variants.
5. In the Button properties panel, rename the new variants to Warning.
6. Change the color variables from `destructive` to the warning tokens (`custom/warning-background`, `custom/warning-foreground`).
7. Select the Button component frame.
8. Run the [Propstar](https://www.figma.com/community/plugin/1116018586739867857/propstar) plugin to tidy the component table.
9. Leave a comment for the developer:
```
@DeveloperName I added a new button variant:
- Variant: Warning
- Uses the warning background and foreground color variables
```
#### Implementation in code
1. Add the warning variables to your `globals.css`. You can do this with the [Figma to shadcn/ui plugin](/plugin).
2. Open `ui/button.tsx`.
3. Locate the variant definitions.
4. Add the warning variant:
```
...
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "underline-offset-4 hover:underline text-primary",
warning: "bg-warning text-warning-foreground hover:bg-warning/90",
},
// ... other variants
},
...
```
## Creating new components
When creating entirely new components, follow these steps to stay consistent with shadcn/ui:
1. Start with a Frame set to the appropriate constraints and Auto Layout resizing.
2. Use `Mode` collection tokens (including `custom/*`) for colors, so the component tracks light/dark and the active style. If a color should differ per style, add a `component/{name}/*` variable in the Style collection that aliases a Mode token and bind that instead — the same pattern the kit's own components use.
3. Apply spacing, width, and radius variables from the `Tailwind` collection, and per-style structure values from the `Style` collection where sizing differs by style.
4. For controls, bind a **minimum height** and let the component hug — don't bake in a fixed height.
5. Add text using the existing text styles.
6. Create variants for different states (default, hover, pressed, focus, disabled).
7. Expose text and boolean properties in the Figma properties panel, and leave repeating regions as empty slots.
8. Document the component's usage and variants.
---
# Icons
> Which icon libraries shadcn/ui supports, how to set one in components.json, and how to switch, trim, or extend the icon libraries in the shadcn/ui kit for Figma.
Canonical: https://www.shadcndesign.com/docs/icons
The kit supports the five icon libraries available in shadcn/create:
- Lucide Icons (default)
- HugeIcons
- Phosphor Icons
- Tabler Icons
- Remix Icon
## Icon libraries in shadcn/ui
shadcn/ui reads the `iconLibrary` value in `components.json` and uses it when the CLI adds components. These are the accepted values and the package each one installs. Counts are rounded and describe the free sets.
| Library | `iconLibrary` value | Package | Icons | License | In the Figma kit |
| --- | --- | --- | --- | --- | --- |
| [Lucide](https://lucide.dev/icons) | `lucide` | `lucide-react` | 1,600+ | ISC | Yes, default |
| [Hugeicons](https://hugeicons.com/icons) | `hugeicons` | `@hugeicons/react` and `@hugeicons/core-free-icons` | 4,000+ free | MIT (free set) | Yes |
| [Phosphor](https://phosphoricons.com) | `phosphor` | `@phosphor-icons/react` | 1,500+ in six weights | MIT | Yes |
| [Tabler Icons](https://tabler.io/icons) | `tabler` | `@tabler/icons-react` | 5,900+ | MIT | Yes |
| [Remix Icon](https://remixicon.com) | `remixicon` | `@remixicon/react` | 3,000+ | Apache 2.0 | Yes |
| [Radix Icons](https://www.radix-ui.com/icons) | `radix` | `@radix-ui/react-icons` | 300+ | MIT | No, add it as a custom library |
Which one to pick:
- **Lucide** is the default for shadcn/ui and for the kit. Zero setup and the widest match with existing shadcn/ui components, templates, and Pro Blocks. It has no filled variants.
- **Tabler Icons** shares Lucide's 24px grid and 2px stroke and adds a filled set, so it is the lowest-risk swap when you need solid states or wider coverage for dashboards.
- **Phosphor** is the pick when you need weights: light for secondary chrome, bold or fill for primary actions, duotone for marketing surfaces.
- **Hugeicons** gives a softer, more branded look and can move from outline to solid and duotone in the paid Pro set.
- **Remix Icon** ships a line and fill version of every glyph, which suits interfaces that toggle icon state on selection.
- **Radix Icons** sits on a 15px grid and only makes sense for older projects that started on the retired default style.
To set the library for a new project, pass it to `shadcn create` or answer the prompt during `npx shadcn init`. For an existing project, change `iconLibrary` in `components.json`, install the package, and re-add the components that render icons so the CLI regenerates their imports. Components accept any icon as a child, so a mixed period during migration works, but keep one library per product for a consistent stroke and grid.
The kit uses the same five libraries as `shadcn create`, and the [Figma to shadcn/ui plugin](/plugin) writes imports for the library that is active in your file, so the icon you place in Figma is the icon the generated code imports.
Icon-library visibility is driven by **boolean variables** in the `Style` collection (`icon-library/lucide`, `icon-library/huge`, `icon-library/phosphor`, `icon-library/tabler`, `icon-library/remix`). Set exactly one to `true`.
## How to switch the icon library
The default is Lucide. To use a different one:
1. Open the variables panel.
2. Switch to the **Style** collection.
3. Set the `icon-library/*` boolean for the library you want to `true`, and set the currently active one to `false`. Keep exactly one enabled.
{/* TODO: re-shoot for 2026 kit */}
You can also switch the icon library from the [Figma to shadcn/ui plugin](/plugin). Its Create tab applies your icon-library choice across all 8 styles.
## Keeping the Figma file size low
The kit includes all five libraries, which adds weight. Choose a single library and remove the rest to reduce your file size. A smaller file loads faster and makes component search more responsive.
1. Decide on your icon library and enable it (see above).
2. Open the Icons page.
3. In the `IconPlaceholder` component, delete the instances for any libraries you no longer need.
4. Delete the Figma pages associated with the removed libraries.
5. In the **Style** collection, delete the `icon-library/*` booleans for the libraries you removed.
## How to select a different icon
You can swap the icon inside the `IconPlaceholder` component. For example, to change the Smile icon to another icon:
1. Select the `IconPlaceholder` instance.
2. In the component panel (top right), click the icon name (Smile).
3. Search for and select the icon you want.
{/* TODO: verify for 2026 kit */}
### Missing an icon?
If an icon is missing from one of the libraries, add it:
1. Go to the library's website and find the icon you need.
2. Open the kit file in Figma and the page for that library.
3. Copy and paste the SVG icon onto its library page.
4. Normalize the size to 24×24 and lock the aspect ratio.
5. Make sure the layers inside are consistent Vectors (use our Lucide library as a reference).
6. Name it with a library prefix, e.g. "Library Name / Icon Name".
7. Select the icon and choose **Create component** (top right).
8. Set the icon's Constraints to Scale.
9. Move the new icon component in with the existing icons.
## Integrating custom icons
The kit is designed to let you plug in your own icon library and use it across components with minimal effort.
### Choosing an icon library
A good icon library should:
1. Be comprehensive enough for your project's needs.
2. Offer consistent, professionally crafted icons.
3. Match your brand's style and feel.
Sticking to a single, high-quality library from the start keeps your project visually consistent, avoids time-consuming icon replacement later, and keeps the design looking professional.
### Add your icon library to the Figma kit
1. Ensure your icons are SVGs.
2. Open the kit file in Figma.
3. Create a new page for your icons (e.g. "Custom Icons").
4. Paste all SVG icons into this page.
5. Normalize sizes to 24×24 and lock aspect ratios.
6. Make sure the layers inside are consistent Vectors (use our Lucide library as a reference).
7. Name icons with a library prefix, e.g. "Custom Icons / Icon Name".
8. Select all icons and choose **Create multiple components** (top right).
9. Open the Icons page and locate the `IconPlaceholder` component.
10. Insert an instance of your icon into `IconPlaceholder`.
11. Set the icon's Constraints to Scale.
12. Select the icon instance and add a new component property: Instance swap.
13. Name the property "Custom Icons" and include all your icons as preferred values.
14. Open the variables panel and go to the **Style** collection.
15. Add a new boolean variable named after your library (e.g. `icon-library/custom`).
16. Turn this boolean on and turn off any other `icon-library/*` booleans. Note that the Style collection has 8 modes (one per style), so set the values across all of them so your library stays active in every style.
17. Close the variables panel and select your icon instance inside `IconPlaceholder`.
18. In the Appearance panel, bind the layer's visibility to the boolean you created.
That's all. You can now use your custom icons across every component in the kit.
### Troubleshooting
In some cases Figma may render the `IconPlaceholder` component larger than intended. This is a known issue that can be resolved by regenerating instances:
1. Open the file or page where the issue appears.
2. Open Quick Actions: `Command + /`
3. Search for `Regenerate all instances (slow)`.
4. Press Enter and wait for it to complete.
## Frequently asked questions
### Which icon library does shadcn/ui use by default?
Lucide. New projects created with `shadcn create` or `npx shadcn init` install `lucide-react` unless you choose another library, and the Figma kit ships with Lucide enabled.
### Which icon libraries does shadcn/ui support?
Six values are accepted in `components.json`: `lucide`, `hugeicons`, `phosphor`, `tabler`, `remixicon`, and `radix`. The Figma kit includes the first five.
### Can I use an icon library that is not on the list?
Yes. Any React icon component works inside shadcn/ui components. The `iconLibrary` setting only controls which package the CLI imports when it adds components. In Figma, add the library with the custom icons method above.
### Are these icons free for commercial use?
Lucide (ISC), Phosphor, Tabler, Radix (MIT), and Remix Icon (Apache 2.0) are free for commercial use. Hugeicons is MIT for the free set and paid for the Pro styles. Check each project's license page before shipping.
### How do I size icons in shadcn/ui components?
Components such as Button size their child SVGs through `[&_svg]` selectors, so a plain `` renders at the right size. Outside of components, use the size utilities, for example `className="size-4"` for 16px.
### Does the plugin generate the right icon imports?
Yes. The Figma to shadcn/ui plugin reads which `icon-library/*` boolean is active and writes imports for that package, using each library's naming convention (for example `IconSettings` for Tabler and `RiSettings3Line` for Remix Icon).
---
# Development
> The shadcn/ui kit for Figma is designed to bridge the gap between design and development seamlessly. This section will guide developers on effectively translating the themes and Figma designs into functional code.
Canonical: https://www.shadcndesign.com/docs/development
## Implementing themes
You can use our [Figma to shadcn/ui plugin](https://www.shadcndesign.com/plugin) to quickly convert Figma variables to CSS code that you can use in your project's globals.css file. Check our [documentation](https://www.shadcndesign.com/docs/plugin) for more details.
## Implementing components
Our [Figma to shadcn/ui plugin](https://www.shadcndesign.com/plugin) can help you generate shadcn/ui components based on your designs in Figma. Make sure to check our our [documentation](https://www.shadcndesign.com/docs/plugin) for more details.
---
# Updates
> Every time we release a new update, you can access the new files via the Customer Portal. We provide updates to align with the latest shadcn/ui releases and incorporate user feedback. We also aim to provide updates when there's a new Figma feature or shadcn/ui component.
Canonical: https://www.shadcndesign.com/docs/updates
## How to get new updates?
Log in to our [Customer Portal](https://polar.sh/shadcndesign/portal) with the email you used to make the purchase.
If you don't remember which email you used, try every address you might have used. If you're still stuck, contact us at [hi@shadcndesign.com](mailto:hi@shadcndesign.com).
### Code not arriving?
- Wait 5 minutes for the server to process the request.
- Make sure your mail server can accept messages from the @polar.sh domain.
- Check your junk/spam inbox.
- If none of the above works, contact our partner: support@polar.sh
---
## How do the updates work?
For Figma resources, updates are new Figma files that most often introduce new components or blocks, along with minor fixes and refinements. You can keep using your current version without disrupting your workflow. For code resources (the React and Premium packages), updates land in the registry: installing a block or template again with the shadcn CLI pulls the latest version.
Keep in mind that **Figma is file-based, not a code repository**, so updates can't be installed automatically like software packages. When we publish an update, it won't appear in your Figma library on its own, nor can it be "installed" with a single action.
Given this, we recommend copying over any new components you need from the updated file into your existing project. This lets you selectively incorporate the improvements most relevant to your work.
We rarely release major updates — usually when the official shadcn/ui receives a significant change. In those cases it's best to stick with the version you started your project on. Updating to a newer major version can be challenging because Figma treats each file separately: you'd need to manually transfer new components and tokens, which is harder still if you modified tokens or added your own components. We therefore recommend adopting new major versions only for new projects.
### Updating variables to the kit 3.0 color model
Kit 3.0 (September 2026) changed how colors are defined: the Tailwind palette moved to the Tailwind CSS v4 values, every base color token aliases that palette, and the `custom/*` and `alpha/*` tints are built with Figma's alias with opacity instead of flattened colors. A 2.x file keeps working as it is, but if you want the new model in a kit you already customized, the `shadcn-design-update` [agent skill](/docs/agent-skills#shadcn-design-update) can migrate the variables in place. It keeps the colors you changed and only converts values that still match the stock kit; the report lists everything it left alone. Save a named version first.
---
## Adding new components to your library
This guide shows how to add new components from the latest shadcn/ui Figma kit to an existing custom library based on an older version, while preserving your styling.
### Prerequisites
- Figma Pro account (or higher) for publishing libraries
- Your custom library based on an older shadcn/ui kit for Figma
- The latest version of the shadcn/ui kit for Figma
- The Swap Variables Figma plugin
### Step-by-step guide
#### Step 1: Open libraries
1. Open your custom library file in Figma.
2. Open the latest shadcn/ui kit for Figma file.
#### Step 2: Publish libraries
1. [Publish](https://help.figma.com/hc/en-us/articles/360025508373-Publish-a-library) both libraries to your Figma workspace.
2. Wait for all components to finish publishing.
3. Reload both files.
#### Step 3: Add a new component
1. Add the variables related to the new component to your existing library.
2. Copy the new component from the latest UI kit.
3. Paste it into your project file.
#### Step 4: Swap libraries
1. In your library, locate the "Assets" button (book icon).
2. Find and open the latest shadcn/ui kit under "Libraries used in this file".
3. Click "Swap library".
4. In the [Swap library](https://help.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-libraries) window, choose your custom library.
5. Review the list of styles and components to be replaced.
6. Click "Swap Library" to apply.
#### Step 5: Use the Swap Variables plugin
1. Open the [Swap Variables](https://www.figma.com/community/plugin/1349108836145173291/swap-variables) plugin.
2. Select the newly added component in your project.
3. Choose "Local Variables".
4. Click "Swap Variables".
#### Step 6: Verify changes
Switch between light and dark [modes](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables) on the new component. Confirm it uses your custom styling, including correct backgrounds for elements like input fields.
If some variables or components didn't swap, manually [swap those instances](https://help.figma.com/hc/en-us/articles/360039150413-Swap-components-and-instances) with ones from your file.
---
# Pro Blocks
> Learn how to install Pro Blocks code into your shadcn/ui projects with the shadcn CLI 3.0.
Canonical: https://www.shadcndesign.com/docs/pro-blocks
## Installation
### Pro Blocks (React and Premium packages)
You can install Pro Blocks with the latest shadcn CLI 3.0. The Pro Blocks work with both the Radix UI and Base UI versions of shadcn/ui — the registry automatically serves the variant matching your project.
1. Ensure shadcn/ui is installed in your project. If not, [install it](https://ui.shadcn.com/docs/installation) now.
2. Find and copy your license key. If you purchased the [React or Premium](/pricing) package, you can find it in [Customer Portal](https://polar.sh/shadcndesign/portal) page after logging in with your email.
3. In your project root, create `.env.local` file with the content: `SHADCNDESIGN_LICENSE_KEY=your_license_key`
4. Update your `components.json` file by adding our registry as presented below.
```json
{
...,
"registries": {
"@shadcndesign": {
"url": "https://www.shadcndesign.com/api/registry/styles/{style}/{name}",
"headers": {
"X-License-Key": "${SHADCNDESIGN_LICENSE_KEY}"
}
}
}
}
```
5. Install our styles: `npx shadcn@latest add @shadcndesign/styles`
6. That's it, you are ready to go! You can install the components by following the examples on the Pro Blocks pages.
```bash
Install a component from the registry
npx shadcn@latest add @shadcndesign/hero-section-1
Install multiple components from the registry
npx shadcn@latest add @shadcndesign/feature-section-1 @shadcndesign/feature-section-2
View a component from the registry
npx shadcn@latest view @shadcndesign/tagline
Search with query in the registry
npx shadcn@latest search @shadcndesign --query "hero"
```
### Radix UI and Base UI
Our registry ships every Pro Block in two variants: one built on Radix UI and one built on Base UI. You don't have to choose anything manually — the shadcn CLI replaces the `{style}` placeholder in the registry URL with the `style` from your `components.json`, and we serve the matching variant:
- **Base UI styles** (`base-vega`, `base-nova`, `base-maia`, etc.) get the Base UI variants.
- **Radix styles** (`radix-vega`, `radix-nova`, etc.) and legacy styles (`new-york`, `default`) get the Radix UI variants.
Blocks import primitives from your local `@/components/ui` folder, so they always match the shadcn/ui components already installed in your project. Themes and styles are shared between both variants.
**Already set up with the previous registry URL?** No action needed — `https://www.shadcndesign.com/api/registry/{name}` keeps working and always serves the Radix UI variants. Switch to the new URL above only if you want automatic Radix/Base UI selection.
### Legacy blocks (React and Premium packages)
In [December 2025's update](/blog/update-december-2025), we refactored Pro Blocks to introduce updated styles and content.
If you want to continue using the pre-refactor blocks, or if you're working with the Figma kit from October 2025 or earlier and need to stay consistent with those versions - update your components.json to point to the legacy registry URL shown below.
```json
{
...,
"registries": {
"@shadcndesign": {
"url": "https://shadcndesign-registry.vercel.app/api/registry/{name}",
"headers": {
"X-License-Key": "${SHADCNDESIGN_LICENSE_KEY}"
}
}
}
}
```
### Free blocks
1. Ensure shadcn/ui is installed in your project. If not, [install it](https://ui.shadcn.com/docs/installation) now.
2. Update your `components.json` file by adding our registry as presented below.
```json
{
...,
"registries": {
"@shadcndesign": {
"url": "https://shadcndesign-free.vercel.app/r/{name}.json"
}
}
}
```
If your project uses the Base UI version of shadcn/ui, point the registry at our style-aware endpoint instead — free blocks don't require a license key:
```json
{
...,
"registries": {
"@shadcndesign": {
"url": "https://www.shadcndesign.com/api/registry/styles/{style}/{name}"
}
}
}
```
3. Install the blocks by following the examples on the Pro Blocks pages. For example, to install the Hero Section 1, run:
```bash
npx shadcn@latest add @shadcndesign/hero-section-1
```
---
# Templates
> Learn how to install our templates code directly in your shadcn/ui project with the CLI.
Canonical: https://www.shadcndesign.com/docs/templates
## Installation
### Free templates
Free templates can be accessed by opening them in [v0](https://v0.app/?utm_source=affiliate&utm_medium=dub&via=shadcndesign&dub_id=FPMgwxxpnedItT0v) with **Access in v0** button on the template page.
### Paid templates
You can install Templates with the latest shadcn CLI 3.0.
> **Note:** Templates are currently built on the Radix UI version of shadcn/ui. Base UI variants of the templates are not available yet.
1. Ensure shadcn/ui is installed in your project. If not, [install it](https://ui.shadcn.com/docs/installation) now.
2. Find and copy your license key. If you purchased the [React or Premium](/pricing) package, you can find it in [Customer Portal](https://polar.sh/shadcndesign/portal) page after logging in with your email.
3. In your project root, create `.env.local` file with the content: `SHADCNDESIGN_LICENSE_KEY=your_license_key`
4. Update your `components.json` file by adding our registry as presented in the Templates docs.
```json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"iconLibrary": "lucide",
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"registries": {
"@shadcndesign": {
"url": "https://www.shadcndesign.com/api/registry/styles/{style}/{name}",
"headers": {
"X-License-Key": "${SHADCNDESIGN_LICENSE_KEY}"
}
}
}
}
```
5. Install our styles: `npx shadcn@latest add @shadcndesign/styles`
6. That's it, you are ready to go! You can install the templates by following the examples in our Templates pages.
```bash
Install Inspiro template
npx shadcn@latest add @shadcndesign/template-inspiro
Install Developer Portfolio template
npx shadcn@latest add @shadcndesign/template-developer-portfolio
```
---
# Themes
> Learn how to install our free themes directly in your shadcn/ui project, or import them into your Figma file as a new style.
Canonical: https://www.shadcndesign.com/docs/themes
## Using CSS from the Theme Generator
If you created a theme in our [Theme Generator](/theme-generator) and copied the CSS, use it in your project like this:
1. Make sure you have shadcn/ui installed.
2. Paste the CSS into your global stylesheet (e.g. `app/globals.css`). Replace the `@theme inline`, `:root`, and `.dark` blocks with the properties you copied.
3. Load the fonts used by your theme. The generator shows the font names (e.g. Inter, Geist). Add the corresponding Google Fonts (or other) `` in your root layout (`layout.tsx`) so `--font-sans` and `--font-heading` resolve correctly.
After that, your components use the new theme variables automatically.
## Free themes installation
If you want to install our free [themes](/themes), you can install them with the latest shadcn CLI 3.0. Themes are CSS-only, so they work with both the Radix UI and Base UI versions of shadcn/ui.
1. Ensure shadcn/ui is installed in your project. If not, [install it](https://ui.shadcn.com/docs/installation) now.
2. Copy the CLI command from our Themes page. For example: `npx shadcn@latest add @shadcndesign/theme-sketchpad`
3. Run the command in your project's terminal.
4. After installation, import the font used by the chosen theme in your `layout.tsx` file.
## Importing themes into Figma
You can import a theme into the shadcn/ui kit for Figma as a **new style** and start designing with it in minutes. Because a custom theme is a mode in the Style collection, it lives alongside the 8 built-in styles and you can switch to it on any page or frame.
1. Open your shadcn/ui kit for Figma file.
2. Choose a theme and copy its CSS.
3. Open the Figma to shadcn/ui plugin.
4. Go to the **Import** tab.
5. Choose **Add as a new style** and pick which of the 8 built-in styles to base it on (default Nova).
6. Paste the copied CSS into the text area.
7. Click **Import**. The plugin creates a new mode in the Style collection with the theme's colors, radius, and fonts applied.
You can also choose **Overwrite an existing style** if you'd rather replace one of the built-in styles with the imported values instead of adding a new mode. Note that adding a new mode is subject to your Figma plan's modes-per-collection limit (the Style collection already has 8) — if adding isn't available on your plan, use Overwrite. {/* TODO: verify current Figma per-plan mode limits */}
---
# Introduction
> Convert Figma designs to shadcn/ui code and manage design system variables with Figma to shadcn/ui plugin
Canonical: https://www.shadcndesign.com/docs/plugin
The [Figma to shadcn/ui](https://www.shadcndesign.com/plugin) plugin is a powerful tool that uses AI to automatically convert Figma designs into production-ready shadcn/ui and Tailwind CSS, while managing your design tokens seamlessly. It bridges the gap between design and development by generating responsive, accessible code and maintaining design system consistency through bi-directional variable management — export to CSS or import from your codebase with ease.
## Plugin 3.0: it detects your kit for you
The plugin reads the file you have open and **detects which kit it is**, then configures itself to match — no version pickers, no manual setup. It recognizes:
- **Kit 3.0** (September 2026) — the current 8-style file (Nova through Lyra), with the Tailwind v4 palette and alias-with-opacity tints.
- **Kit 2.x** — the earlier 8-style files (July 2026 onward).
- **Earlier kit releases** — June 2026 and older.
- **Tailwind v3 era kits** — January 2025 and older.
The plugin updates itself through the Figma Community, so there is nothing to install when a new kit generation ships.
Export and import work with every kit generation. The plugin picks the right defaults automatically; when an older file is open, the classic flow appears unchanged. You can confirm what was detected — and override it in the rare case a collection was renamed — in the plugin **Settings** (see [Manage variables](/docs/variables-management#settings-and-kit-detection)).
The plugin works best with the [shadcn/ui kit for Figma](https://www.shadcndesign.com/) by the shadcndesign team. Use components, variables, and styles from our UI kit to ensure accurate code generation.
## Topics
- [Generate code](/docs/generating-code)
- [Manage variables](/docs/variables-management)
- [Export and import Typeset](/docs/plugin-typeset)
- [Select and install Pro Blocks](/docs/plugin-pro-blocks)
## Try it out for free
Learn how to use the shadcn/ui plugin in Figma. You have **15 free uses** available to test the plugin.
Go to this [Figma Community page](https://www.figma.com/community/file/1516755232097201435/demo-figma-to-shadcn-ui-plugin) to test the plugin:
1. Open the file in your Figma account.
2. Follow the instructions in the Figma file.
## Getting started
{/* TODO: re-shoot for plugin 3.0 */}
1. Open [our Figma to shadcn/ui plugin](https://www.figma.com/community/plugin/1427238109341529865/figma-to-shadcn-ui) in the shadcn/ui kit for Figma file. **Make sure to open our plugin (by Matt Wierzbicki).**
2. Provide your license key – if you purchased the [Premium](/pricing) package, you can find it in [Customer Portal (Polar)](https://polar.sh/shadcndesign/portal) after logging in with your email. **Please note**: if you purchased the personal license, you can only activate the license key on one Figma account.
## FAQ
### Is the plugin compatible with any shadcn/ui kit for Figma?
For the best results, we recommend using the plugin specifically with the [shadcn/ui kit for Figma created by the shadcndesign team](https://www.shadcndesign.com/). The plugin auto-detects the current kit as well as all earlier kit generations, so any version of our kit is supported out of the box. To achieve the best possible outcomes, use our recommended shadcn/ui kit and follow the best practices described in the docs.
### Is the quality of the generated code close to the original design in Figma?
Yes, the generated code accurately reflects your Figma designs when you follow our best practices, with the plugin performing optimally for simpler, modular components rather than complex page layouts. For maximum fidelity, we recommend generating code for individual UI elements or smaller parts of your UI instead of entire pages. Using the Claude Opus 4.8 model can also provide better results.
---
# Generate code
> Use the Figma to shadcn/ui plugin to generate high-quality shadcn/ui and Tailwind CSS code — or plain HTML & CSS — from your Figma designs.
Canonical: https://www.shadcndesign.com/docs/generating-code
## Generating code
To generate the components in our plugin, you must have a valid API key from one of the AI platforms mentioned below:
- Google AI Studio
- v0
- Anthropic AI
In our plugin, we support these AI models:
- Claude Opus 4.8 (recommended)
- Claude Fable 5 (Anthropic's most capable model)
- Claude Sonnet 5
- Claude Opus 4.7
- Claude Sonnet 4.6
- Gemini 3.1 Pro Preview
- Gemini 3.5 Flash
- v0-1.5-md
- v0-1.5-lg
### Do I need access to paid AI model credits to use the plugin?
Yes. The plugin uses AI credits from your AI platform account for all component generation tasks.
### How much does code generation cost?
The cost is based on token usage. When you select a frame in Figma and add it using the "+" button, the plugin displays the estimated input token count for code generation. For current pricing details, please refer to:
- [https://ai.google.dev/gemini-api/docs/pricing](https://ai.google.dev/gemini-api/docs/pricing)
- [https://v0.app/pricing](https://v0.app/pricing)
- [https://platform.claude.com/docs/en/pricing](https://platform.claude.com/docs/en/pricing)
### Anthropic AI
1. Sign in or create your [Anthropic AI account](https://console.anthropic.com/) if you haven’t already.
2. Go to your Anthropic AI [Billing](https://console.anthropic.com/settings/billing) tab and add credits. Credits are necessary to generate components with our plugin.
3. Get your Anthropic API key from your [settings page](https://console.anthropic.com/settings/keys).
4. Open the Figma to shadcn/ui plugin.
5. Open the plugin settings.
6. Select the Claude Opus 4.8 model (recommended). One Anthropic API key works for all Claude models in the plugin.
7. Enter your API key in the plugin settings (the key is stored locally and securely).
8. Press the **Verify key** button to proceed. If the key is valid, you can start using the plugin.
_Claude Fable 5 is Anthropic's most capable model and is priced above the Opus tier. It also requires an Anthropic organization with standard (30-day) data retention — organizations configured for zero data retention cannot use it._
### Google AI Studio
1. Sign in or create your [Google AI Studio](https://aistudio.google.com/apikey) account.
2. Create an API key.
3. Add credits in the billing page.
4. Open the Figma to shadcn/ui plugin.
5. Open the plugin settings.
6. Select the Gemini 3.1 Pro Preview model (strongest reasoning) or Gemini 3.5 Flash (faster and cheaper). One Google API key works for both.
7. Enter your API key in the plugin settings (the key is stored locally and securely).
8. Press the **Verify key** button to proceed. If the key is valid, you can start using the plugin.
### v0
1. Create your [v0 account](https://v0.app/?utm_source=affiliate&utm_medium=dub&via=shadcndesign&dub_id=FPMgwxxpnedItT0v).
2. Upgrade your account to Premium.
3. Go to [Settings / API keys](https://v0.app/chat/settings/keys).
4. Create a new key.
5. Enter your API key in the plugin settings (the key is stored locally and securely).
6. Press the **Verify** button to proceed. If the key is valid, you can start using the plugin.
### Select your stack
The **Your stack** selectors in the Build tab tell the plugin which project setup the generated code should target. Set them once — the plugin remembers your choice.
**Output format**
- **React + shadcn/ui** (default) — generates a React TypeScript component built with shadcn/ui components and Tailwind CSS.
- **HTML & CSS** — generates a single self-contained `.html` file with semantic markup and vanilla CSS. No React, no Tailwind, no build step — paste it into a file and open it in a browser. When HTML & CSS is selected, the component library and framework selectors are hidden, since they only apply to React output.
**Component library**
- **Radix UI** (default) — for shadcn/ui projects built on Radix primitives. Composition uses the `asChild` prop.
- **Base UI** — for projects created with the Base UI variants of shadcn/ui (the default for new shadcn/ui projects since July 2026). The generated code uses the `render` prop instead of `asChild`, passes the options array to `Select` via the `items` prop, and follows the other Base UI conventions.
**Framework**
- **Next.js** (default) — adds the `"use client"` directive and uses the Next.js `Link` component.
- **Vite (React SPA)** — plain `` links, no `"use client"` directive.
- **React Router** — uses `import { Link } from "react-router"` with the `to` prop.
- **TanStack Start** — uses `import { Link } from "@tanstack/react-router"` with the `to` prop.
If you're not sure which component library your project uses: projects created with `npx shadcn init` after July 2026 use Base UI by default; projects created earlier (or with the `-b radix` flag) use Radix. You can also check whether your `components/ui` files import from `radix-ui`/`@radix-ui/*` (Radix) or `@base-ui/react` (Base UI).
### Generate code
1. Open the Figma to shadcn/ui plugin.
2. Select the frame or component instance in Figma.
3. Use the "+" icon in the plugin's interface to add the desktop variant. Optionally, select the mobile variant of your design and press the "+" icon.
4. Select your output format in the **Your stack** row — and for React output, your component library and framework — so the generated code matches your project.
5. You can also provide extra instructions, for example, `Make sure to implement the searching feature`, `Make sure the tab filters work`, `Use this logo (URL) in the navbar`, etc.
6. Monitor token count to stay within API limits. If needed, consider splitting larger components.
7. Press the **Build it** button and wait.
### HTML & CSS output
When the output format is set to **HTML & CSS**, the plugin generates one complete, self-contained HTML document instead of a React component:
- **Semantic HTML** — headers, sections, buttons, forms, and landmarks instead of styled `div`s.
- **shadcn/ui theme variables** — the CSS references tokens like `var(--primary)` and `var(--background)`, with a `:root` (light) and `.dark` theme block embedded at the top of the stylesheet. When you run the plugin in a kit file, the block carries your file's actual theme values; users who already have a `globals.css` from the [variables export](/docs/variables-management) can simply delete the block.
- **Faithful styling** — spacing, radii, colors, and typography come from your actual Figma values, including mixed-color text, translucent borders, and fully-rounded (pill) elements.
- **Working interactivity** — native HTML elements first (``, `