Changelog

v3.1: out of beta, with a new Rhea style

Our Pro Figma UI Kit is coming out of beta as v3.1. We went through every component to match shadcn as closely as possible.

What's new#

• New Rhea style, bringing the kit to eight styles.
• Better alignment to shadcn across visuals, component states, names, and prop names, all brought closer to the shadcn/ui source.
• Fewer variables, with the token system trimmed and simplified.
• Fewer component variants, removing noise so each component matches shadcn's actual matrix.
• More examples across components and blocks.
• More slots for greater flexibility when composing.

Plugin#

• The shadcncraft plugin now lists Rhea in the Style selector when you create a style.

Availability#

• Now available for Pro and Pro + React customers. Base follows shortly after.

Native shadcn styles in Figma + shadcn Create import

The biggest update to the Figma UI kit yet. All seven shadcn styles now live natively in Figma variable modes, and the plugin can import any preset from shadcn Create.

Styles, native in Figma#

• All seven shadcn styles ship as modes inside the Figma file's Style variable collection:
  • Vega
  • Nova
  • Maia
  • Mira
  • Lyra
  • Luma
  • Sera
• Switch between them from Figma's variables panel, no plugin needed.
• Every component, block, and pro page in the file updates instantly when the Style mode changes.

shadcn Create preset import#

• The shadcncraft plugin now imports presets directly from shadcn Create.
• Paste a preset URL into the plugin → a new Style mode is created in Figma, matching the preset's colors, radius, and fonts 1:1.
• After import, the new style is editable via Figma's component-level variables.

Themes layer on top#

• Light and Dark themes live in Figma's Mode variable collection.
• Every Style + Theme combination is valid: Light Nova, Dark Sera, etc.
• Switch from the same variables panel.

Native icon switching#

• Icon set is now driven by a Figma variable and linked to the active Style, the same way shadcn handles icons in code.
• Supported sets: Lucide, Hugeicons, Remix, Phosphor, Tabler.
• Switching Style automatically swaps the icon set.

Pro components and blocks inherit Styles#

• Pro components, blocks, and layout templates now respond to the same Style

Availability#

• Initial support for Pro and Pro + React.
• Base support is coming soon.

Support for bases, styles, and icon libraries

Our registry just evolved. shadcncraft components and blocks now adapt to your project's setup: your base, your style, your icon library, all picked up automatically from your shadcn config. Install something, and you get source that already matches the rest of your codebase. No find-and-replace afterwards. No fighting the defaults.

Until now, every item shipped as Radix UI with Lucide icons baked in. If your project ran on something else, the gap was yours to close.

You're still in charge#

Your design system is yours. Your tokens, your fonts, your radius, your theme, your icons. None of that changes. What changed is that shadcncraft now meets you where you are instead of asking you to come to it.

• Bases: Radix UI or Base UI. Same component API on both sides.
• Styles: seven shadcn-compatible presets, each with its own feel:
  • Vega: the classic shadcn/ui look.
  • Nova: reduced padding and margins for compact layouts. The new default.
  • Maia: soft and rounded, with generous spacing.
  • Lyra: boxy and sharp. Pairs well with mono fonts.
  • Mira: compact. Made for dense interfaces.
  • Luma: fluid, luminous, and soft.
  • Sera: editorial and typographic.
• Icon libraries: Lucide, Tabler Icons, Hugeicons, Phosphor Icons, or Remix Icon.

Whatever your components.json says, the install matches.

Try before you install#

Every component and block page now has a live customizer, the same kind of experience you'll recognize from shadcn Create. Swap bases, switch styles, change the icon library, tweak fonts and radius, preview a different shadcn theme, and even apply a tweakcn theme on top of it. See exactly what you're about to bring into your project before you bring it in.

What changed for installs#

If you're already using shadcncraft, nothing breaks. Your existing setup keeps working. To opt into the new behavior, point the registry at the style-aware URL:

{
  "registries": {
    "@shadcncraft": {
-     "url": "https://shadcncraft.com/r/{name}",
+     "url": "https://shadcncraft.com/r/{style}/{name}",
      "headers": {
        // ... your existing headers ...
      }
    }
  }
}

That's the whole migration, one line. Existing projects keep working untouched, and the legacy styles (new-york, default, new-york-v4) resolve to the classic radix-vega variant. Move over whenever it suits you.

What's next: Figma and code, aligned#

We're actively working to bring the two sides closer together. The goal is a Figma-to-code experience that feels as close to working in shadcn natively as possible: same primitives, same styles, same icons, same tokens, picked up automatically on both sides. Expect more updates here over the coming releases as we close the remaining gaps.

Try it#

• Open any item on the components or blocks pages and play with the customizer.
• Read the Installation guide when you're ready to wire it up.

New brand, website, and Figma plugin

We’ve launched a new brand and completely redesigned the shadcncraft website. This update reflects how the product has evolved from a simple UI kit into a full design system built on shadcn/ui.

The new site introduces improved navigation, clearer product structure, and a better way to explore blocks, components, pages, and full sites.

Alongside the rebrand, we’ve also released the shadcncraft Figma plugin, which connects the Figma UI kit directly with shadcn/ui development workflows.

With the plugin you can:

• Import themes from tweakcn, shadcn, or CSS
• Export themes as CSS
• Convert structured Figma layouts to React code
• Generate CLI commands for installing Pro blocks

These updates make it easier to move from design → code → production while keeping your Figma and React projects aligned.

Learn more:

• Read the rebrand announcement → Introducing shadcncraft
• Explore the Figma plugin → Announcing shadcncraft Figma plugin v2