Figma plugin

Design in Figma. Ship real shadcn/ui code.

Build complete shadcn styles, layer themes from tweakcn or CSS over them, then export production-ready CSS and React that drop straight into your shadcn/ui project.
Try in Figma Documentation
Create complete shadcn styles
Go beyond colors. Build a full shadcn style: color palette, radius, typography, and icon set, all stored as native Figma variables. Switch it and the whole file re-themes instantly.
  • Eight styles built in: Nova, Vega, Maia, Lyra, Mira, Luma, Sera, and Rhea
  • Set base color, accent, chart palette, fonts, icon library, and radius
  • Switch a style and every component re-themes at once, with nothing detached
Stay in sync with shadcn Create
Every style has a matching shadcn preset code, the exact code shadcn Create uses. Paste a preset in to rebuild that style in Figma, or copy a style's preset out to use it in your shadcn/ui project.
  • Paste a shadcn Create preset to rebuild that style in Figma
  • Copy a Figma style's preset straight into your shadcn/ui project
  • Identical preset codes on both sides, so design and code never drift
Save hours by theming automatically
Bring real shadcn/ui themes into Figma and layer them over any style, without rebuilding them by hand.
  • tweakcn presets, a custom tweakcn URL, or your saved themes
  • Layer any theme over a chosen base style
  • Import a theme straight from a shadcn/ui globals.css
Export CSS to align perfectly with code
Push your Figma theme back into code. Export it as a production-ready globals.css and drop it straight into your shadcn/ui project. No manual copying of values. No guessing which variables changed.
  • Production-ready globals.css output
  • Compatible with shadcn/ui and Tailwind v4
  • Optionally export primitive token references
Pro + React
Convert structured Figma layouts to React code
Generate production-ready React code from your designs. The plugin analyzes structured layouts and outputs React components built on shadcn/ui and Tailwind conventions.
  • Clean, readable React output
  • Shadcn-compatible structure
  • Designed for real blocks and components
  • Copy or open directly in Vercel v0
Pro + React
Generate Pro Blocks CLI commands
Install blocks directly into your project. Select a Pro Block or Component and instantly generate the correct shadcn CLI command. Copy and paste into your terminal and you’re done.
  • No documentation hunting
  • No command mistakes
  • Works with your existing shadcn setup

Design in Figma. Ship real shadcn/ui code.

Try in Figma Documentation

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:

  • Create complete shadcn styles, including color palette, radius, typography, and icon set
  • Move styles between Figma and shadcn Create with preset codes
  • Import themes from tweakcn, using presets, a custom URL, or your saved themes
  • Import a theme straight from a shadcn/ui globals.css
  • Export any style's theme as shadcn/ui-compatible CSS
  • Export structured React code from selected frames
  • Copy CLI commands for shadcncraft components and blocks

SBIOTJ

Join 9,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.