Figma

shadcn Figma UI Kit

The complete shadcn Figma library. All seven shadcn styles native, preset and theme imports from shadcn create and tweakcn, and icon switching across five sets. Every component matched 1:1 with shadcn in code.
Get the KitPreview Pro
Native styles

All seven shadcn styles, native in Figma

The first shadcn Figma library where every shadcn style (Nova, Vega, Maia, Mira, Luma, Lyra, Sera) lives natively in Figma variable modes. Switch between them from the variables panel. No plugin needed.
Multiple shadcn styles, one Figma file
Stop swapping files when the brand changes. Every shadcn style ships in the same Figma Kit, ready to flip at any time.
Multiple shadcn styles, one Figma file
Every detail captured per style
Per-component spacing, typography, color, corner radius, and icon set. All seven shadcn styles are recreated to the pixel and driven by Figma variables. Not approximated.
Every detail captured per style
Add or edit shadcn styles, natively in Figma
Create your own shadcn-aligned styles directly in Figma. Adjust radius, colors, fonts, and icons via the same variable system that powers the seven shipped styles.
Add or edit shadcn styles, natively in Figma
shadcn create import

Import any preset from shadcn create

Build a theme on shadcn create, paste the URL into the shadcncraft Figma Plugin, and get an exact 1:1 recreation in your Figma file. Colors, radius, fonts, the lot. Then tweak it natively via component-level Figma variables. Control no other shadcn Figma Kit offers.
Get the KitExplore Plugin
shadcn themes

Layer a tweakcn theme over any shadcn style

Already designing in tweakcn? Import your theme via the shadcncraft Figma Plugin and layer it over any of the seven shadcn styles. Light and Dark across every combination.
Explore PluginVisit tweakcn
Icons

Icons that switch with your shadcn style

Native icon switching, linked to your selected shadcn style, the same way shadcn handles icons in code.
  • Lucide
  • Tabler Icons
  • Hugeicons
  • Phosphor Icons
  • Remix Icon

Change shadcn style, icons follow.

Icons that switch with your shadcn style
Bundles

Choose your shadcn Figma kit

Three tiers. Same Figma file structure. Upgrade any time without rebuilding.
Feature comparison table
Curated sample of shadcn components and pro blocks
Free
Base
Pro
Pro + React
All 7 shadcn styles, native in Figma
Free
Base
Pro
Pro + React
Aligned with the free React component and block registry
Free
Base
Pro
Pro + React
All official shadcn components and blocks
Free
Base
Pro
Pro + React
Style preset import from shadcn create
Free
Base
Pro
Pro + React
Theme import from tweakcn
Free
Base
Pro
Pro + React
Pro application, marketing, and ecommerce components
Free
Base
Pro
Pro + React
Pro application, marketing, and ecommerce blocks
Free
Base
Pro
Pro + React
React code export from Figma
Free
Base
Pro
Pro + React
Component and block CLI install commands
Free
Base
Pro
Pro + React
Get the Kit

Frequently Asked Questions

Quick FAQs to get you started.
Still have questions? See all FAQs, or get support.

The plugin connects Figma directly to shadcn/ui workflows. You can:

  • Import from tweakcn
  • Log in to your tweakcn account
  • Apply preset, community, or custom themes
  • Export themes as shadcn/ui-compatible CSS
  • Copy CLI commands for shadcncraft components and blocks
  • Export structured React code from selected frames
  • Swap icon libraries across your entire file instantly

SBIOTJ

Join 3,000+ builders shipping with shadcncraft

Design and assemble full pages faster with production-ready blocks built for real products.
  • Production-ready blocks and components
  • Clean React and Tailwind parity
  • Built for SaaS, marketing, and ecommerce teams
Get the design system
Join Now CTA

Real support from the team behind shadcncraft

Get help within 24 hours from the people who build and maintain the system.
Email
Prefer a direct line? Send us a message and we'll get back to you as soon as possible.
Contact
Discord
Get quick support, share feedback, or connect with other builders.
Join
Feedback
Got something to say about anything shadcncraft? We'd love to hear it.