Loved by shadcn & hundreds of creators and teams
Loved by shadcn & hundreds of creators and teams
Loved by shadcn & hundreds of creators and teams
Design, theme, and launch shadcn/ui projects faster
The complete shadcn/ui kit for Figma and React with Pro Components, Blocks, and Templates. Build your team’s design system and theme it instantly with tweakcn.
Top design and dev teams use Shadcraft to ship shadcn/ui faster.
Built for
developers.
d
e
s
i
g
n
e
r
s
.
developers.
d
e
s
i
g
n
e
r
s
.
developers.
d
e
s
i
g
n
e
r
s
.
developers.
d
e
s
i
g
n
e
r
s
.
Start with a complete Figma foundation, theme it instantly with tweakcn, and stay aligned with every update. Whether you’re creating your first design system or scaling a product, Shadcraft helps you move faster and stay consistent.
Base Figma shadcn/ui Kit
All the essential shadcn/ui components and blocks
With instant theming support through tweakcn for fast brand alignment.
Base Figma shadcn/ui Kit
All the essential shadcn/ui components and blocks
With instant theming support through tweakcn for fast brand alignment.
Base Figma shadcn/ui Kit
All the essential shadcn/ui components and blocks
With instant theming support through tweakcn for fast brand alignment.
Base Figma shadcn/ui Kit
All the essential shadcn/ui components and blocks
With instant theming support through tweakcn for fast brand alignment.
Instant theming with tweakcn
Re-theme your entire file in seconds. Connect to tweakcn to update colours, typography, radii and more across every component and block, giving you instant brand alignment.
Instant theming with tweakcn
Re-theme your entire file in seconds. Connect to tweakcn to update colours, typography, radii and more across every component and block, giving you instant brand alignment.
Instant theming with tweakcn
Re-theme your entire file in seconds. Connect to tweakcn to update colours, typography, radii and more across every component and block, giving you instant brand alignment.
Instant theming with tweakcn
Re-theme your entire file in seconds. Connect to tweakcn to update colours, typography, radii and more across every component and block, giving you instant brand alignment.
Pixel perfect, production ready shadcn/ui
A complete library of shadcn-aligned components and blocks, all meticulously crafted to be pixel perfect and ready for real product work. Design with confidence knowing everything maps cleanly to code.
Pixel perfect, production ready shadcn/ui
A complete library of shadcn-aligned components and blocks, all meticulously crafted to be pixel perfect and ready for real product work. Design with confidence knowing everything maps cleanly to code.
Pixel perfect, production ready shadcn/ui
A complete library of shadcn-aligned components and blocks, all meticulously crafted to be pixel perfect and ready for real product work. Design with confidence knowing everything maps cleanly to code.
Pixel perfect, production ready shadcn/ui
A complete library of shadcn-aligned components and blocks, all meticulously crafted to be pixel perfect and ready for real product work. Design with confidence knowing everything maps cleanly to code.
Variables for brands and dark mode
Colour, spacing, type and radii are wired up with Figma variables, ready for multiple brands and themes. Spin up light, dark and alternative brand treatments without rebuilding your components.
Variables for brands and dark mode
Colour, spacing, type and radii are wired up with Figma variables, ready for multiple brands and themes. Spin up light, dark and alternative brand treatments without rebuilding your components.
Variables for brands and dark mode
Colour, spacing, type and radii are wired up with Figma variables, ready for multiple brands and themes. Spin up light, dark and alternative brand treatments without rebuilding your components.
Variables for brands and dark mode
Colour, spacing, type and radii are wired up with Figma variables, ready for multiple brands and themes. Spin up light, dark and alternative brand treatments without rebuilding your components.
Pro Figma shadcn/ui Kit
Pro Components, Blocks, and Templates
A complete Figma UI Kit that includes everything from the Base Kit plus Pro Components, Blocks and Templates.
Pro Figma shadcn/ui Kit
Pro Components, Blocks, and Templates
A complete Figma UI Kit that includes everything from the Base Kit plus Pro Components, Blocks and Templates.
Pro Figma shadcn/ui Kit
Pro Components, Blocks, and Templates
A complete Figma UI Kit that includes everything from the Base Kit plus Pro Components, Blocks and Templates.
Pro Figma shadcn/ui Kit
Pro Components, Blocks, and Templates
A complete Figma UI Kit that includes everything from the Base Kit plus Pro Components, Blocks and Templates.
Pro Components & Blocks
Unlock premium components and content blocks built for high-converting websites, dashboards, and landing pages.
Pro Components & Blocks
Unlock premium components and content blocks built for high-converting websites, dashboards, and landing pages.
Pro Components & Blocks
Unlock premium components and content blocks built for high-converting websites, dashboards, and landing pages.
Pro Components & Blocks
Unlock premium components and content blocks built for high-converting websites, dashboards, and landing pages.
Full Page Templates
Jump-start your project with complete, designed page templates optimized for clarity, performance, and visual impact.
Full Page Templates
Jump-start your project with complete, designed page templates optimized for clarity, performance, and visual impact.
Full Page Templates
Jump-start your project with complete, designed page templates optimized for clarity, performance, and visual impact.
Full Page Templates
Jump-start your project with complete, designed page templates optimized for clarity, performance, and visual impact.
Perfect for Marketing Sites
Craft landing pages, product sites, and sales funnels with components specifically tailored for marketing and conversion.
Perfect for Marketing Sites
Craft landing pages, product sites, and sales funnels with components specifically tailored for marketing and conversion.
Perfect for Marketing Sites
Craft landing pages, product sites, and sales funnels with components specifically tailored for marketing and conversion.
Perfect for Marketing Sites
Craft landing pages, product sites, and sales funnels with components specifically tailored for marketing and conversion.
New: Pro React shadcn/ui Kit
Pro Figma UI Kit & matching React components
Build production-ready interfaces with aligned design and code.
New: Pro React shadcn/ui Kit
Pro Figma UI Kit & matching React components
Build production-ready interfaces with aligned design and code.
New: Pro React shadcn/ui Kit
Pro Figma UI Kit & matching React components
Build production-ready interfaces with aligned design and code.
New: Pro React shadcn/ui Kit
Pro Figma UI Kit & matching React components
Build production-ready interfaces with aligned design and code.
Pixel-perfect Design Parity
Enjoy design-to-dev accuracy with components that precisely match the provided Figma files.
Pixel-perfect Design Parity
Enjoy design-to-dev accuracy with components that precisely match the provided Figma files.
Pixel-perfect Design Parity
Enjoy design-to-dev accuracy with components that precisely match the provided Figma files.
Pixel-perfect Design Parity
Enjoy design-to-dev accuracy with components that precisely match the provided Figma files.
Production-ready Blocks
Use pre-built blocks engineered with clean, scalable code so you can launch faster and confidently.
Production-ready Blocks
Use pre-built blocks engineered with clean, scalable code so you can launch faster and confidently.
Production-ready Blocks
Use pre-built blocks engineered with clean, scalable code so you can launch faster and confidently.
Production-ready Blocks
Use pre-built blocks engineered with clean, scalable code so you can launch faster and confidently.
Fast Install Via CLI
Set up your full component library in seconds with a streamlined, developer-friendly CLI that handles all configuration for you.
Fast Install Via CLI
Set up your full component library in seconds with a streamlined, developer-friendly CLI that handles all configuration for you.
Fast Install Via CLI
Set up your full component library in seconds with a streamlined, developer-friendly CLI that handles all configuration for you.
Fast Install Via CLI
Set up your full component library in seconds with a streamlined, developer-friendly CLI that handles all configuration for you.
Endorsed by the creator of shadcn/ui
Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.
Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.
Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.
Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.
Community buzz
if you're a designer, this is the best way to get started building in 2025
Aug 1, 2025
if you're a designer, this is the best way to get started building in 2025
Aug 1, 2025
if you're a designer, this is the best way to get started building in 2025
Aug 1, 2025
if you're a designer, this is the best way to get started building in 2025
Aug 1, 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
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
I've discovered the Shadcraft Figma shadcn/ui kit: over 200 components, light/dark themes, super easy to customize! Perfect for designers and devs. Thanks Shadcraft!
Sept 8, 2025
I've discovered the Shadcraft Figma shadcn/ui kit: over 200 components, light/dark themes, super easy to customize! Perfect for designers and devs. Thanks Shadcraft!
Sept 8, 2025
I've discovered the Shadcraft Figma shadcn/ui kit: over 200 components, light/dark themes, super easy to customize! Perfect for designers and devs. Thanks Shadcraft!
Sept 8, 2025
I've discovered the Shadcraft Figma shadcn/ui kit: over 200 components, light/dark themes, super easy to customize! Perfect for designers and devs. Thanks Shadcraft!
Sept 8, 2025
Recently purchased! Great kit! Excited to see more web app components vs website oriented ones.
Oct 23, 2025
Recently purchased! Great kit! Excited to see more web app components vs website oriented ones.
Oct 23, 2025
Recently purchased! Great kit! Excited to see more web app components vs website oriented ones.
Oct 23, 2025
Recently purchased! Great kit! Excited to see more web app components vs website oriented ones.
Oct 23, 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
@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
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
Sale
Black Friday Pricing
Sale extended until Nov 30. One payment. Unlimited projects. One year of updates.
Base
All the essential shadcn/ui components and blocks. A Figma UI Kit that helps you build faster on a solid design foundation.
$83
$119
30% off with code BLACKFRIDAY
Easy theming via tweakcn
All 56 shadcn/ui Components
All 44 shadcn/ui Blocks
1500+ Lucide icons
Tailwind CSS alignment
Prototype interactions
Figma variables
Light & dark mode
Pro
Pro Components, Blocks, and Templates. A complete Figma UI Kit that lets you assemble polished layouts in seconds.
$209
$299
30% off with code BLACKFRIDAY
Everything in Base
Pro Components
Blocks for faster workflows
Full page Templates
Perfect for marketing sites
Ideal for product apps [soon]
Assemble sites in seconds
Responsive layouts
+
Pro React
Pro Figma UI Kit plus matching React components. Build production-ready interfaces with aligned design and code.
$349
$499
30% off with code BLACKFRIDAY
Built on shadcn/ui
Pixel perfect design parity
Zero setup needed
Composable / extendible
Production ready blocks
Fully responsive
shadcn aligned tokens
Fast install via CLI and MCP support
Prices in USD.
Secure payment with Lemon Squeezy
Sale
Black Friday Pricing
Sale extended until Nov 30. One payment. Unlimited projects. One year of updates.
Base
All the essential shadcn/ui components and blocks. A Figma UI Kit that helps you build faster on a solid design foundation.
$83
$119
30% off with code BLACKFRIDAY
Easy theming via tweakcn
All 56 shadcn/ui Components
All 44 shadcn/ui Blocks
1500+ Lucide icons
Tailwind CSS alignment
Prototype interactions
Figma variables
Light & dark mode
Pro
Pro Components, Blocks, and Templates. A complete Figma UI Kit that lets you assemble polished layouts in seconds.
$209
$299
30% off with code BLACKFRIDAY
Everything in Base
Pro Components
Blocks for faster workflows
Full page Templates
Perfect for marketing sites
Ideal for product apps [soon]
Assemble sites in seconds
Responsive layouts
+
Pro React
Pro Figma UI Kit plus matching React components. Build production-ready interfaces with aligned design and code.
$349
$499
30% off with code BLACKFRIDAY
Built on shadcn/ui
Pixel perfect design parity
Zero setup needed
Composable / extendible
Production ready blocks
Fully responsive
shadcn aligned tokens
Fast install via CLI and MCP support
Prices in USD.
Secure payment with Lemon Squeezy
Sale
Black Friday Pricing
Sale extended until Nov 30. One payment. Unlimited projects. One year of updates.
Base
All the essential shadcn/ui components and blocks. A Figma UI Kit that helps you build faster on a solid design foundation.
$83
$119
30% off with code BLACKFRIDAY
Easy theming via tweakcn
All 56 shadcn/ui Components
All 44 shadcn/ui Blocks
1500+ Lucide icons
Tailwind CSS alignment
Prototype interactions
Figma variables
Light & dark mode
Pro
Pro Components, Blocks, and Templates. A complete Figma UI Kit that lets you assemble polished layouts in seconds.
$209
$299
30% off with code BLACKFRIDAY
Everything in Base
Pro Components
Blocks for faster workflows
Full page Templates
Perfect for marketing sites
Ideal for product apps [soon]
Assemble sites in seconds
Responsive layouts
+
Pro React
Pro Figma UI Kit plus matching React components. Build production-ready interfaces with aligned design and code.
$349
$499
30% off with code BLACKFRIDAY
Built on shadcn/ui
Pixel perfect design parity
Zero setup needed
Composable / extendible
Production ready blocks
Fully responsive
shadcn aligned tokens
Fast install via CLI and MCP support
Prices in USD.
Secure payment with Lemon Squeezy
Sale
Black Friday Pricing
Sale extended until Nov 30. One payment. Unlimited projects. One year of updates.
Base
All the essential shadcn/ui components and blocks. A Figma UI Kit that helps you build faster on a solid design foundation.
$83
$119
30% off with code BLACKFRIDAY
Easy theming via tweakcn
All 56 shadcn/ui Components
All 44 shadcn/ui Blocks
1500+ Lucide icons
Tailwind CSS alignment
Prototype interactions
Figma variables
Light & dark mode
Pro
Pro Components, Blocks, and Templates. A complete Figma UI Kit that lets you assemble polished layouts in seconds.
$209
$299
30% off with code BLACKFRIDAY
Everything in Base
Pro Components
Blocks for faster workflows
Full page Templates
Perfect for marketing sites
Ideal for product apps [soon]
Assemble sites in seconds
Responsive layouts
+
Pro React
Pro Figma UI Kit plus matching React components. Build production-ready interfaces with aligned design and code.
$349
$499
30% off with code BLACKFRIDAY
Built on shadcn/ui
Pixel perfect design parity
Zero setup needed
Composable / extendible
Production ready blocks
Fully responsive
shadcn aligned tokens
Fast install via CLI and MCP support
Prices in USD.
Secure payment with Lemon Squeezy
Support
Support
Need a hand? We’re here to help
Our small team aims to respond to all enquiries within 24 hours. Choose the best way to reach us below.
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
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?
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?
Coming soon
Coming soon
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.












