Convert Your Figma Designs to Shadcn UI Code in Seconds
With the shadcn/studio Figma plugin, Instantly converts your Figma designs into shadcn/ui code, ready to be copy-pasted or installed via the CLI.
CLI
Streamline Design-to-Code Workflow
Efficient transformation of Figma designs into React components utilizing the Shadcn Figma Plugin, powered by advanced AI-driven code generation.
AI-Powered Code Generation
Select your design frame and watch as AI generates clean, optimized, and accessible code, perfectly aligned with shadcn/ui best practices.
Teams Handoff
Simplify the design-to-development process to improve collaboration and reduce handoff friction.
Copy Code
Easily copy the generated component code and paste it directly into your project, streamlining your workflow.
$ npx shadcn add @ss-themes/claude
CLI Command
Use the shadcn/ui CLI command to instantly add generated components to your project and speed up development.
Open in v0
Preview & customize generated components instantly in v0 for real-time testing and iteration before adding them to your project.
Transform Figma Frames into Functional Code
Convert Your Figma Designs into Clean, Accessible Code with a Single Click.
Select any design frame, and let AI generate clean, fully optimized components, seamlessly crafted to adhere to shadcn/ui best practices for effortless integration and consistency.
Copy the code - Simply copy the component code and paste it into your project.
Copy CLI - Use the shadcn/ui CLI command to swiftly integrate the code into your project.
Open in v0 - Launch the component in v0 for instant testing and customization.
Export Figma Design Tokens into CSS Variables
Instantly transform your Figma design tokens—such as colors, typography, and radius—into CSS variables for perfect design-to-code consistency.
Quickly export your design tokens—like colors and radius—into usable CSS variables. The plugin ensures perfect consistency between your design system and codebase by generating well-formatted CSS that you can directly paste into your globals.css file.
Perfect consistency between design and code
Easy to integrate into your existing project
Supports Tailwind v4
Import CSS Variables Into Figma
variables into Figma to auto-create or update design tokens supporting both light and dark themes.
Keep your designs aligned with your codebase. Import your CSS variables back into Figma and automatically create or update design tokens. The plugin supports both light and dark themes for full consistency.
Keep your design system in sync with the code
Manage light and dark themes seamlessly
Streamline collaboration between design and dev teams
Use Pre-Designed Blocks via CLI
Add pre-designed blocks to your project instantly with the powerful shadcn/ui CLI command to save your time.
The Copy Blocks CLI allows you to integrate pre-designed blocks instantly with a single command. It helps the blocks and component addition process by eliminating the need to visit the website each time to copy the CLI.
Add pre-designed blocks with a single CLI command.
Eliminate the need to visit websites to copy CLI code.
Streamline block and component addition for faster development.
Why use this Figma Plugin?
Achieve perfect design consistency and efficiency by using the Figma plugin, which ensures your designs are quickly converted into high-quality, usable code with minimal effort.
Eliminate manual handoffs between design and development by automatically converting your designs into clean, ready-to-use code.
Keep your design and code in perfect harmony with easy export and import features for design tokens and styles.
Easily integrate components, blocks & styles into your projects with simple CLI commands or by copying the code.
Foster seamless collaboration between design and development teams to ensure alignment.
Bring your own API keys from supported LLM (Claude, Gemini, or OpenAI) to maintain full control over usage & costs, with no additional subscription fees.
Make the design-to-development process smoother, so teams can collaborate effortlessly and handoffs feel seamless.
The Wall of Love
Here's what some of our users have to say about shadcn/studio.
Terry Carson
@mrterrycarson
x.comNour Rouas
@rouas_nour
x.comMy SaaS tech stack in one tweet:
📝 PRD: Claude @AnthropicAI
🎨 UI: @lovable_dev
🧑💻 Refined: @cursor_ai
🧩 Components: @ShadcnStudio
🎯 Styling: @tailwindcss
🔧 Backend/Auth: @supabase
💳 Payments: @stripe
🚀 Deploy: @vercel
Still building. Follow for updates.
David
@DavidBensonX
x.comI am loving @ShadcnStudio everyday. But i am highly anticipating the Shadcn Template.
Terry Carson
@mrterrycarson
x.comNour Rouas
@rouas_nour
x.comMy SaaS tech stack in one tweet:
📝 PRD: Claude @AnthropicAI
🎨 UI: @lovable_dev
🧑💻 Refined: @cursor_ai
🧩 Components: @ShadcnStudio
🎯 Styling: @tailwindcss
🔧 Backend/Auth: @supabase
💳 Payments: @stripe
🚀 Deploy: @vercel
Still building. Follow for updates.
David
@DavidBensonX
x.comI am loving @ShadcnStudio everyday. But i am highly anticipating the Shadcn Template.
Terry Carson
@mrterrycarson
x.comNour Rouas
@rouas_nour
x.comMy SaaS tech stack in one tweet:
📝 PRD: Claude @AnthropicAI
🎨 UI: @lovable_dev
🧑💻 Refined: @cursor_ai
🧩 Components: @ShadcnStudio
🎯 Styling: @tailwindcss
🔧 Backend/Auth: @supabase
💳 Payments: @stripe
🚀 Deploy: @vercel
Still building. Follow for updates.
David
@DavidBensonX
x.comI am loving @ShadcnStudio everyday. But i am highly anticipating the Shadcn Template.
Terry Carson
@mrterrycarson
x.comNour Rouas
@rouas_nour
x.comMy SaaS tech stack in one tweet:
📝 PRD: Claude @AnthropicAI
🎨 UI: @lovable_dev
🧑💻 Refined: @cursor_ai
🧩 Components: @ShadcnStudio
🎯 Styling: @tailwindcss
🔧 Backend/Auth: @supabase
💳 Payments: @stripe
🚀 Deploy: @vercel
Still building. Follow for updates.
David
@DavidBensonX
x.comI am loving @ShadcnStudio everyday. But i am highly anticipating the Shadcn Template.
Shounak Ghosh
@shahankk42
x.comShri Vatz
@shri_vatz
x.comalotmorealots
u/alotmorealots
RedditRandom was quite fun!
I think you need to have some components on the Examples page that actually use the Serif and Monospace fonts though, as there's no way to quickly preview the impact of those changes.
I also feel like the opening/closing experience of the studio is fiddly and would make me less inclined to use it. Being able to toggle it so I can see the impact on the components it hides would be a noticeable improvement in the UX.
Are there any plans for being able to export themes in some format?
Shounak Ghosh
@shahankk42
x.comShri Vatz
@shri_vatz
x.comalotmorealots
u/alotmorealots
RedditRandom was quite fun!
I think you need to have some components on the Examples page that actually use the Serif and Monospace fonts though, as there's no way to quickly preview the impact of those changes.
I also feel like the opening/closing experience of the studio is fiddly and would make me less inclined to use it. Being able to toggle it so I can see the impact on the components it hides would be a noticeable improvement in the UX.
Are there any plans for being able to export themes in some format?
Shounak Ghosh
@shahankk42
x.comShri Vatz
@shri_vatz
x.comalotmorealots
u/alotmorealots
RedditRandom was quite fun!
I think you need to have some components on the Examples page that actually use the Serif and Monospace fonts though, as there's no way to quickly preview the impact of those changes.
I also feel like the opening/closing experience of the studio is fiddly and would make me less inclined to use it. Being able to toggle it so I can see the impact on the components it hides would be a noticeable improvement in the UX.
Are there any plans for being able to export themes in some format?
Shounak Ghosh
@shahankk42
x.comShri Vatz
@shri_vatz
x.comalotmorealots
u/alotmorealots
RedditRandom was quite fun!
I think you need to have some components on the Examples page that actually use the Serif and Monospace fonts though, as there's no way to quickly preview the impact of those changes.
I also feel like the opening/closing experience of the studio is fiddly and would make me less inclined to use it. Being able to toggle it so I can see the impact on the components it hides would be a noticeable improvement in the UX.
Are there any plans for being able to export themes in some format?
Vishal Lohar
@yourcodebuddy
x.comMeet Patel
@___meetpatel___
x.comBeautiful UI & Great UX while using it
Highly Recommend to everyone👐🏻
abdullah
u/simpleguy231
RedditJD Solanki
@me_jd_solanki
x.comJust found @ShadcnStudio 👀
It fills the gap of missing customised demos which are not available in shadcn blocks or docs. Great part, you can copy-paste like shadcn docs 🤘🏻
E.g. pre-made user combobox which shows user avatar, email and name in options.Vishal Lohar
@yourcodebuddy
x.comMeet Patel
@___meetpatel___
x.comBeautiful UI & Great UX while using it
Highly Recommend to everyone👐🏻
abdullah
u/simpleguy231
RedditJD Solanki
@me_jd_solanki
x.comJust found @ShadcnStudio 👀
It fills the gap of missing customised demos which are not available in shadcn blocks or docs. Great part, you can copy-paste like shadcn docs 🤘🏻
E.g. pre-made user combobox which shows user avatar, email and name in options.Vishal Lohar
@yourcodebuddy
x.comMeet Patel
@___meetpatel___
x.comBeautiful UI & Great UX while using it
Highly Recommend to everyone👐🏻
abdullah
u/simpleguy231
RedditJD Solanki
@me_jd_solanki
x.comJust found @ShadcnStudio 👀
It fills the gap of missing customised demos which are not available in shadcn blocks or docs. Great part, you can copy-paste like shadcn docs 🤘🏻
E.g. pre-made user combobox which shows user avatar, email and name in options.Vishal Lohar
@yourcodebuddy
x.comMeet Patel
@___meetpatel___
x.comBeautiful UI & Great UX while using it
Highly Recommend to everyone👐🏻
abdullah
u/simpleguy231
RedditJD Solanki
@me_jd_solanki
x.comJust found @ShadcnStudio 👀
It fills the gap of missing customised demos which are not available in shadcn blocks or docs. Great part, you can copy-paste like shadcn docs 🤘🏻
E.g. pre-made user combobox which shows user avatar, email and name in options.Simple Pricing
Get access to everything for lifetime, use for unlimited projects.
Trusted by the top designers, developers & agencies.
Featured In
We have been proudly featured on renowned platforms.
Any Questions?
Browse through these FAQs to find answers to commonly asked questions.