Back to Plugins
shadcncraft: shadcn styles, themes & React from Figma

shadcncraft: shadcn styles, themes & React from Figma

Bring shadcn styles into Figma. Import any shadcn create preset. Export CSS and React code.

Plugin Preview

shadcncraft: shadcn styles, themes & React from Figma preview

About this plugin

Import shadcn styles into Figma and export production CSS or React code directly from your designs. Works with shadcncraft Free, Base, Pro, and Pro React kits.shadcncraft v3 makes all eight shadcn styles: Nova, Vega, Maia, Mira, Luma, Lyra, Sera, Rhea native in Figma variable modes. Switch styles, themes (Light / Dark), and icon sets (Lucide, Hugeicons, Remix, Phosphor, Tabler) directly from Figma's variables panel. Use this plugin to bring in new ones and to export.Import- Any preset from shadcn create recreated 1:1 in your Figma file- shadcn/ui projects via CSS- tweakcn themesExport- Production-ready CSS from your Figma stylesGenerate- React code from your Figma designs- CLI commands for premium blocksFeedback and supportHave feedback or run into an issue? We'd like to hear from you. Use Send feedback inside the plugin, or email [email protected] the Docs for guidance on importing presets, managing styles and themes, working with icon libraries, and generating React code from your Figma designs.

Plugin Details

Version36
CreatedJanuary 24, 2026
Last UpdatedJuly 31, 2026
Categoryui-kits
CreatorHamish O'Neill
Stats136 installs, 35 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://*.shadcn.com
    • https://*.shadcncraft.com
    • https://*.tweakcn.com
    • https://api.allorigins.win
    • https://api.anthropic.com
    • https://api.cors.lol
    • https://api.openai.com
    • https://api.polar.sh
    • https://cdn.jsdelivr.net
    • https://corsproxy.io
    • https://plugin.shadcraft.com
    • https://registry-shadcncraft.vercel.app
    • https://shadcncraft.com
    • https://tweakcn.com
    • https://ui.shadcn.com