The ultimate shadcn Figma UI kit
The full shadcn/ui library for Figma plus Pro Components, Blocks, and Templates. Premium quality, and built to deliver fast.
Trusted by top designers & devs
Themes for any shadcn/ui project
The tweakcn plugin instantly themes your Shadcraft Figma UI Kit, and you can load your own custom themes from the tweakcn website as well.
Trusted by teams from top organizations
Introducing the shadcn/ui Pro Kit for Figma
Introducing the shadcn/ui Pro Kit for Figma
Our Pro Kit includes everything from the Base Figma UI Kit, plus Pro Components, Blocks, and Templates. It’s built for designers and developers who need to move fast across marketing sites and product apps without sacrificing quality.
Our Pro Kit includes everything from the Base Figma UI Kit, plus Pro Components, Blocks, and Templates. It’s built for designers and developers who need to move fast across marketing sites and product apps without sacrificing quality.
Designer buzz
@shadcraft_ just turned my random figma clicking into design system "magic". 10/10 would theme again.
Sept 11, 2025
@shadcraft_ just turned my random figma clicking into design system "magic". 10/10 would theme again.
Sept 11, 2025
@shadcraft_ just turned my random figma clicking into design system "magic". 10/10 would theme again.
Sept 11, 2025
I tried @shadcraft_ while putting together a block and it worked very well. The 200+ components cover pretty much everything, and the light/dark themes make it consistent. Feels solid, saves time, and lets me focus more on the actual design instead of fiddling with missing parts
Sept 9, 2025
I tried @shadcraft_ while putting together a block and it worked very well. The 200+ components cover pretty much everything, and the light/dark themes make it consistent. Feels solid, saves time, and lets me focus more on the actual design instead of fiddling with missing parts
Sept 9, 2025
I tried @shadcraft_ while putting together a block and it worked very well. The 200+ components cover pretty much everything, and the light/dark themes make it consistent. Feels solid, saves time, and lets me focus more on the actual design instead of fiddling with missing parts
Sept 9, 2025
Shoutout to @shadcraft_ ! it’s made designing in Figma for us non designers a breeze. The fact that I can deeply customize my theme with tweakcn then just have them synced with Figma with LIGHT and DARK mode??? 🤤
Sept 12, 2025
Shoutout to @shadcraft_ ! it’s made designing in Figma for us non designers a breeze. The fact that I can deeply customize my theme with tweakcn then just have them synced with Figma with LIGHT and DARK mode??? 🤤
Sept 12, 2025
Shoutout to @shadcraft_ ! it’s made designing in Figma for us non designers a breeze. The fact that I can deeply customize my theme with tweakcn then just have them synced with Figma with LIGHT and DARK mode??? 🤤
Sept 12, 2025
Everything you need, styled your way
Everything you need, styled your way
Export to Figma Make
Easily export your themed Shadcraft library to use in your Make vibe coding apps. No extra setup required.
Use in Figma Sites
Turn Shadcraft into a design library for your Sites projects, so your web builds stay consistent and on-brand.
Built for
Designers
Start on the same page as your devs, with a pre-build library of high quality components out of the box.
Designers
Start on the same page as your devs, with a pre-build library of high quality components out of the box.
Designers
Start on the same page as your devs, with a pre-build library of high quality components out of the box.
Developers
Bring your tweakcn or custom CSS styles right into Figma instantly and ensure design matches code exactly.
Developers
Bring your tweakcn or custom CSS styles right into Figma instantly and ensure design matches code exactly.
Developers
Bring your tweakcn or custom CSS styles right into Figma instantly and ensure design matches code exactly.
Startups
Accelerate your roadmap by starting from a solid, pre-built foundation of shadcn/ui components in Figma.
Startups
Accelerate your roadmap by starting from a solid, pre-built foundation of shadcn/ui components in Figma.
Startups
Accelerate your roadmap by starting from a solid, pre-built foundation of shadcn/ui components in Figma.
Agencies
Deliver faster by applying your clients brand in seconds. Then deliver with confidence every time with a high quality UI kit.
Agencies
Deliver faster by applying your clients brand in seconds. Then deliver with confidence every time with a high quality UI kit.
Agencies
Deliver faster by applying your clients brand in seconds. Then deliver with confidence every time with a high quality UI kit.
Pricing
Base
Essential shadcn/ui components and blocks for Figma. Build faster with a solid design foundation.
Easy theming via tweakcn
All 56 shadcn/ui Components
All 44 shadcn/ui Blocks
1500+ Lucide icons
2025 Figma features
Prototype interactions
Figma variables
Light & dark mode
$119
One time payment. Lifetime access. 1 year of updates
Pro Components, Blocks, and Templates. Assemble complete layouts in seconds.
Everything in Figma Base
Full library of Pro Components
Pre-built Blocks for faster workflows
Ready-to-use Templates for complete pages
Perfect for marketing sites
Ideal for product apps [soon]
Assemble entire experiences in seconds
Small & large screen layouts
$299
$399
One time payment. Lifetime access. 1 year of updates
Prices in USD.
Secure payment with Lemon Squeezy
Pricing
Base
Essential shadcn/ui components and blocks for Figma. Build faster with a solid design foundation.
Easy theming via tweakcn
All 56 shadcn/ui Components
All 44 shadcn/ui Blocks
1500+ Lucide icons
2025 Figma features
Prototype interactions
Figma variables
Light & dark mode
$119
One time payment. Lifetime access. 1 year of updates
Pro Components, Blocks, and Templates. Assemble complete layouts in seconds.
Everything in Figma Base
Full library of Pro Components
Pre-built Blocks for faster workflows
Ready-to-use Templates for complete pages
Perfect for marketing sites
Ideal for product apps [soon]
Assemble entire experiences in seconds
Small & large screen layouts
$299
$399
One time payment. Lifetime access. 1 year of updates
Prices in USD.
Secure payment with Lemon Squeezy
Pricing
Base
Essential shadcn/ui components and blocks for Figma. Build faster with a solid design foundation.
Easy theming via tweakcn
All 56 shadcn/ui Components
All 44 shadcn/ui Blocks
1500+ Lucide icons
2025 Figma features
Prototype interactions
Figma variables
Light & dark mode
$119
One time payment. Lifetime access. 1 year of updates
Pro Components, Blocks, and Templates. Assemble complete layouts in seconds.
Everything in Figma Base
Full library of Pro Components
Pre-built Blocks for faster workflows
Ready-to-use Templates for complete pages
Perfect for marketing sites
Ideal for product apps [soon]
Assemble entire experiences in seconds
Small & large screen layouts
$299
$399
One time payment. Lifetime access. 1 year of updates
Prices in USD.
Secure payment with Lemon Squeezy
Stay in the know
Keep updated on all things happening with Shadcraft.
We respect your privacy
Stay in the know
Keep updated on all things happening with Shadcraft.
We respect your privacy
Stay in the know
Keep updated on all things happening with Shadcraft.
We respect your privacy
FAQ
What is Shadcraft?
How does Shadcraft work with Figma?
What is included in the Shadcraft UI kit?
Why should I use Shadcraft instead of building my own UI kit?
Can I theme Shadcraft components in Figma?
What is the difference between tweakcn and Shadcraft?
How often is Shadcraft updated?
Can I use Shadcraft for commercial projects?
I am new to Figma. Will Shadcraft still help me?
Does Shadcraft work for developers using shadcn/ui?
How do I publish the Shadcraft UI kit as a Figma library?
How do I enable Shadcraft in multiple Figma projects?
Do you offer an affiliate program?
What is Shadcraft?
How does Shadcraft work with Figma?
What is included in the Shadcraft UI kit?
Why should I use Shadcraft instead of building my own UI kit?
Can I theme Shadcraft components in Figma?
What is the difference between tweakcn and Shadcraft?
How often is Shadcraft updated?
Can I use Shadcraft for commercial projects?
I am new to Figma. Will Shadcraft still help me?
Does Shadcraft work for developers using shadcn/ui?
How do I publish the Shadcraft UI kit as a Figma library?
How do I enable Shadcraft in multiple Figma projects?
Do you offer an affiliate program?
What is Shadcraft?
How does Shadcraft work with Figma?
What is included in the Shadcraft UI kit?
Why should I use Shadcraft instead of building my own UI kit?
Can I theme Shadcraft components in Figma?
What is the difference between tweakcn and Shadcraft?
How often is Shadcraft updated?
Can I use Shadcraft for commercial projects?
I am new to Figma. Will Shadcraft still help me?
Does Shadcraft work for developers using shadcn/ui?
How do I publish the Shadcraft UI kit as a Figma library?
How do I enable Shadcraft in multiple Figma projects?
Do you offer an affiliate program?
Introducing Rules
Introducing Rules
Rules is our new AI-ready design guidelines tool for shadcn/ui. It generates structured, production-ready guidance so your team can stay aligned and ship with confidence.
Rules is our new AI-ready design guidelines tool for shadcn/ui. It generates structured, production-ready guidance so your team can stay aligned and ship with confidence.