Figma plugin

Design in Figma. Ship real shadcn/ui code.

Preview themes, install components from your selection, and bring your design into your coding agent. Create shadcn styles, export CSS and React, and explore the Pro library without leaving Figma.
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
  • Use the same preset as a starting point in Figma and code
Preview your theme before applying it
Compare themes on shadcn components before changing your file. Swipe through controls, charts, forms, and notifications, then apply the theme when you are ready.
  • tweakcn presets, a custom tweakcn URL, or your saved themes
  • Compare light and dark previews without changing your file
  • Browse your filtered themes with Previous and Next
  • Import globals.css or layer a theme over your chosen base style
Theme preview in the shadcncraft Figma plugin
Bring your Figma theme into 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
Generate React code
Generate React code from structured Figma layouts using shadcn/ui and Tailwind conventions. Choose your stack and model, then review the generated code in your project.
  • Expanded OpenAI, Claude, and Gemini model choices
  • shadcn-compatible structure
  • Designed for real blocks and components
  • Copy or open directly in Vercel v0
Pro
Install selected components
Select one component, several components, or a containing frame. Copy one shadcn CLI command for the verified matches and run it in your project.
  • Commands update as your canvas selection changes
  • Duplicate installs are removed; unresolved matches stay visible
  • Installs library components, with your layout and edits implemented separately
Pro
Copy an AI handoff
Copy an AI handoff into Cursor or another coding agent. Bring the selected design's structure, resolved theme variables, and verified install commands into the implementation conversation.
  • Includes your selected frames and chosen stack
  • Carries theme variables and component references into the handoff
  • Preparing the handoff makes no AI generation call
Explore Pro in Figma
Browse blocks, components, and apps without leaving your design. Open full detail pages, compare bundles, and check out inside the plugin.
  • Search and filter the Pro catalog
  • Keep your filters and browsing position when returning from a detail page
  • A visible purchase action on every product detail page

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
  • Preview themes in light and dark mode before applying them
  • Copy one install command for selected components or a containing frame
  • Prepare an AI handoff for Cursor or another coding agent
  • Browse Pro blocks, components, and apps, compare bundles, and check out inside Figma

SBIOTJ

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