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.
One-time payment • Lifetime updates
One payment • One year of updates
One payment • One year of updates
Top design and dev teams use Shadcraft to ship shadcn/ui faster.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><g d="M 5.999 36 C 9.311 36 11.999 33.312 11.999 30 L 11.999 23.999 L 5.999 23.999 C 2.688 23.999 0 26.687 0 30 C 0 33.312 2.688 36 5.999 36 Z M 0 18.004 C 0 14.691 2.688 12.003 5.999 12.003 L 11.999 12.003 L 11.999 24.004 L 5.999 24.004 C 2.688 24.004 0 21.316 0 18.004 Z M 0 6 C 0 2.688 2.688 0 5.999 0 L 11.999 0 L 11.999 12.001 L 5.999 12.001 C 2.688 12.001 0 9.313 0 6 Z M 12.001 0 L 18.001 0 C 21.312 0 24 2.688 24 6 C 24 9.313 21.312 12.001 18.001 12.001 L 12.001 12.001 Z M 24 18.004 C 24 21.316 21.312 24.004 18.001 24.004 C 14.689 24.004 12.001 21.316 12.001 18.004 C 12.001 14.691 14.689 12.003 18.001 12.003 C 21.312 12.003 24 14.691 24 18.004 Z" fill="transparent" height="35.99999907424481px" id="gN7I927ny" transform="translate(6 0)" width="24.00000076323058px"><path d="M 5.999 12.001 C 9.311 12.001 11.999 9.313 11.999 6 L 11.999 0 L 5.999 0 C 2.688 0 0 2.688 0 6 C 0 9.313 2.688 12.001 5.999 12.001 Z" fill="rgb(10, 207, 131)" height="12.000800160670593px" id="LEQAgqym9" transform="translate(0 23.999)" width="11.998800087266225px"/><path d="M 0 6 C 0 2.688 2.688 0 5.999 0 L 11.999 0 L 11.999 12.001 L 5.999 12.001 C 2.688 12.001 0 9.313 0 6 Z" fill="rgb(162, 89, 255)" height="12.000800160670593px" id="wHHomUG1Y" transform="translate(0 12.003)" width="11.998800087266225px"/><path d="M 0 6 C 0 2.688 2.688 0 5.999 0 L 11.999 0 L 11.999 12.001 L 5.999 12.001 C 2.688 12.001 0 9.313 0 6 Z" fill="rgb(242, 78, 30)" height="12.000800160670577px" id="Wdbd_x23b" width="11.998800087266225px"/><path d="M 0 0 L 5.999 0 C 9.311 0 11.999 2.688 11.999 6 C 11.999 9.313 9.311 12.001 5.999 12.001 L 0 12.001 Z" fill="rgb(255, 114, 98)" height="12.000800160670577px" id="GtUh511Ro" transform="translate(12.001 0)" width="11.998800087266225px"/><path d="M 11.999 6 C 11.999 9.313 9.311 12.001 5.999 12.001 C 2.688 12.001 0 9.313 0 6 C 0 2.688 2.688 0 5.999 0 C 9.311 0 11.999 2.688 11.999 6 Z" fill="rgb(26, 188, 254)" height="12.000800160670593px" id="csflZBPLl" transform="translate(12.001 12.003)" width="11.998800087266225px"/></g></svg>)
Base Figma shadcn/ui Kit
All the essential shadcn/ui components and blocks
56 production-ready components and 44 blocks, built to match shadcn/ui exactly. Instant theming via tweakcn for fast brand alignment in Figma.
Base Figma shadcn/ui Kit
All the essential shadcn/ui components and blocks
56 production-ready components and 44 blocks, built to match shadcn/ui exactly. Instant theming via tweakcn for fast brand alignment in Figma.
Base Figma shadcn/ui Kit
All the essential shadcn/ui components and blocks
56 production-ready components and 44 blocks, built to match shadcn/ui exactly. Instant theming via tweakcn for fast brand alignment in Figma.
Base Figma shadcn/ui Kit
All the essential shadcn/ui components and blocks
56 production-ready components and 44 blocks, built to match shadcn/ui exactly. Instant theming via tweakcn for fast brand alignment in Figma.
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 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 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 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 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 for shadcn/ui
Includes the full Base Kit plus 28 Pro components, 25 blocks, and 8 ready-made templates. Designed to scale across marketing and product experiences.
Pro Figma shadcn/ui Kit
Pro components, blocks, and templates for shadcn/ui
Includes the full Base Kit plus 28 Pro components, 25 blocks, and 8 ready-made templates. Designed to scale across marketing and product experiences.
Pro Figma shadcn/ui Kit
Pro components, blocks, and templates for shadcn/ui
Includes the full Base Kit plus 28 Pro components, 25 blocks, and 8 ready-made templates. Designed to scale across marketing and product experiences.
Pro Figma shadcn/ui Kit
Pro components, blocks, and templates for shadcn/ui
Includes the full Base Kit plus 28 Pro components, 25 blocks, and 8 ready-made templates. Designed to scale across marketing and product experiences.
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.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><path d="M 0 3.257 C 0 1.458 1.46 0 3.261 0 C 5.063 0 6.523 1.458 6.523 3.257 C 6.523 5.055 5.063 6.513 3.261 6.513 C 1.46 6.513 0 5.055 0 3.257 Z" fill="rgb(97, 218, 251)" height="6.513224025389372px" id="L4ba2xU4a" transform="translate(14.818 14.414)" width="6.522727272727266px"/><path d="M 0 6.672 C 0 2.987 7.835 0 17.5 0 C 27.165 0 35 2.987 35 6.672 C 35 10.357 27.165 13.344 17.5 13.344 C 7.835 13.344 0 10.357 0 6.672 Z" fill="transparent" height="13.344166295919678px" id="Y0lMcBQ9l" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1" stroke="rgb(97, 218, 251)" transform="translate(0.5 11.328)" width="35px"/><path d="M 1.742 0.367 C 4.937 -1.476 11.446 3.806 16.278 12.164 C 21.111 20.522 22.437 28.791 19.242 30.633 C 16.046 32.476 9.537 27.194 4.705 18.836 C -0.128 10.478 -1.454 2.209 1.742 0.367 Z" fill="transparent" height="30.999999999999996px" id="btZWCNgDj" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1" stroke="rgb(97, 218, 251)" transform="translate(7.508 2.5)" width="20.983008846130854px"/><path d="M 19.242 0.367 C 22.437 2.209 21.111 10.478 16.278 18.836 C 11.446 27.194 4.937 32.476 1.742 30.633 C -1.454 28.791 -0.128 20.522 4.705 12.164 C 9.537 3.806 16.046 -1.476 19.242 0.367 Z" fill="transparent" height="31px" id="LTuMs7L0P" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1" stroke="rgb(97, 218, 251)" transform="translate(7.508 2.5)" width="20.98300884613085px"/></svg>)
New: Pro React shadcn/ui Kit
Pro Figma UI kit with matching shadcn/ui React components
Design and ship with aligned design and code. Everything in Pro, plus 22 React components and 16 blocks built to match.
New: Pro React shadcn/ui Kit
Pro Figma UI kit with matching shadcn/ui React components
Design and ship with aligned design and code. Everything in Pro, plus 22 React components and 16 blocks built to match.
New: Pro React shadcn/ui Kit
Pro Figma UI kit with matching shadcn/ui React components
Design and ship with aligned design and code. Everything in Pro, plus 22 React components and 16 blocks built to match.
New: Pro React shadcn/ui Kit
Pro Figma UI kit with matching shadcn/ui React components
Design and ship with aligned design and code. Everything in Pro, plus 22 React components and 16 blocks built to match.
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 + MCP
Install the full React library in seconds. The CLI sets up components, tokens, and an MCP connection so your system stays in sync across tools.
Fast Install via CLI + MCP
Install the full React library in seconds. The CLI sets up components, tokens, and an MCP connection so your system stays in sync across tools.
Fast Install via CLI + MCP
Install the full React library in seconds. The CLI sets up components, tokens, and an MCP connection so your system stays in sync across tools.
Fast Install via CLI + MCP
Install the full React library in seconds. The CLI sets up components, tokens, and an MCP connection so your system stays in sync across tools.
New
Introducing ClearFlow
The first in our our new collection of Sites. A modern fintech-ready SaaS full website template with a bespoke Figma UI Kit and production-ready React components.
New
Introducing ClearFlow
The first in our our new collection of Sites. A modern fintech-ready SaaS full website template with a bespoke Figma UI Kit and production-ready React components.
New
Introducing ClearFlow
The first in our our new collection of Sites. A modern fintech-ready SaaS full website template with a bespoke Figma UI Kit and production-ready React components.
New
Introducing ClearFlow
The first in our our new collection of Sites. A modern fintech-ready SaaS full website template with a bespoke Figma UI Kit and production-ready React components.
Designed to convert from day one
ClearFlow is built around proven SaaS conversion patterns, with a confident hero, clear value positioning, and strong CTAs for demos and sales. It is a complete, functional website designed to help fintech and B2B products launch quickly and start converting immediately.
Designed to convert from day one
ClearFlow is built around proven SaaS conversion patterns, with a confident hero, clear value positioning, and strong CTAs for demos and sales. It is a complete, functional website designed to help fintech and B2B products launch quickly and start converting immediately.
Designed to convert from day one
ClearFlow is built around proven SaaS conversion patterns, with a confident hero, clear value positioning, and strong CTAs for demos and sales. It is a complete, functional website designed to help fintech and B2B products launch quickly and start converting immediately.
Designed to convert from day one
ClearFlow is built around proven SaaS conversion patterns, with a confident hero, clear value positioning, and strong CTAs for demos and sales. It is a complete, functional website designed to help fintech and B2B products launch quickly and start converting immediately.
Production ready, built on shadcn/ui
Built with Next.js 16, shadcn/ui, Tailwind CSS v4, and TypeScript, ClearFlow delivers a modern, scalable foundation that is ready for real world use. Tasteful animations and transitions add polish and clarity, helping guide users without distracting from the message.
Production ready, built on shadcn/ui
Built with Next.js 16, shadcn/ui, Tailwind CSS v4, and TypeScript, ClearFlow delivers a modern, scalable foundation that is ready for real world use. Tasteful animations and transitions add polish and clarity, helping guide users without distracting from the message.
Production ready, built on shadcn/ui
Built with Next.js 16, shadcn/ui, Tailwind CSS v4, and TypeScript, ClearFlow delivers a modern, scalable foundation that is ready for real world use. Tasteful animations and transitions add polish and clarity, helping guide users without distracting from the message.
Production ready, built on shadcn/ui
Built with Next.js 16, shadcn/ui, Tailwind CSS v4, and TypeScript, ClearFlow delivers a modern, scalable foundation that is ready for real world use. Tasteful animations and transitions add polish and clarity, helping guide users without distracting from the message.
Fast theming for new brands and clients
The entire template can be re-themed in minutes using tweakcn. Update colors, typography, spacing, and radii across all pages and components from a single place, making it easy to adapt ClearFlow to new brands, themes, or customer needs without rebuilding layouts.
Fast theming for new brands and clients
The entire template can be re-themed in minutes using tweakcn. Update colors, typography, spacing, and radii across all pages and components from a single place, making it easy to adapt ClearFlow to new brands, themes, or customer needs without rebuilding layouts.
Fast theming for new brands and clients
The entire template can be re-themed in minutes using tweakcn. Update colors, typography, spacing, and radii across all pages and components from a single place, making it easy to adapt ClearFlow to new brands, themes, or customer needs without rebuilding layouts.
Fast theming for new brands and clients
The entire template can be re-themed in minutes using tweakcn. Update colors, typography, spacing, and radii across all pages and components from a single place, making it easy to adapt ClearFlow to new brands, themes, or customer needs without rebuilding layouts.
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
Pricing
Upgrade anytime. Pay only the difference between products.
Select licence
Single
Team
Enterprise
For solo designers and developers
Fast support • Unlimited projects • Lifetime updates
Base
All official shadcn/ui components and blocks in Figma. Everything you need to start designing with a strong foundation.
Easy theming via tweakcn
All shadcn components
All shadcn 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.
Everything in Base
25+ Pro Components
117 Blocks to ship faster
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.
Everything in Pro
Pixel perfect design parity
Zero setup needed
Composable / extendible
Production ready blocks
Fully responsive
shadcn aligned tokens
CLI install & MCP support
Prices in USD.
Secure payment with Polar.sh
+
Free
Looking for a free option?
Access a curated set of shadcn components in the Figma community library, try tweakcn theming, and use the free Shadcraft registry. A simple way to trial the kit before upgrading.
Pricing
Upgrade anytime. Pay only the difference between products.
Select licence
Single
Team
Enterprise
For solo designers and developers
Fast support • Unlimited projects • Lifetime updates
Base
All official shadcn/ui components and blocks in Figma. Everything you need to start designing with a strong foundation.
Easy theming via tweakcn
All shadcn components
All shadcn 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.
Everything in Base
25+ Pro Components
117 Blocks to ship faster
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.
Everything in Pro
Pixel perfect design parity
Zero setup needed
Composable / extendible
Production ready blocks
Fully responsive
shadcn aligned tokens
CLI install & MCP support
Prices in USD.
Secure payment with Polar.sh
+
Free
Looking for a free option?
Access a curated set of shadcn components in the Figma community library, try tweakcn theming, and use the free Shadcraft registry. A simple way to trial the kit before upgrading.
Pricing
Upgrade anytime. Pay only the difference between products.
Select licence
Single
Team
Enterprise
For solo designers and developers
Fast support • Unlimited projects • Lifetime updates
Base
All official shadcn/ui components and blocks in Figma. Everything you need to start designing with a strong foundation.
Easy theming via tweakcn
All shadcn components
All shadcn 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.
Everything in Base
25+ Pro Components
117 Blocks to ship faster
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.
Everything in Pro
Pixel perfect design parity
Zero setup needed
Composable / extendible
Production ready blocks
Fully responsive
shadcn aligned tokens
CLI install & MCP support
Prices in USD.
Secure payment with Polar.sh
+
Free
Looking for a free option?
Access a curated set of shadcn components in the Figma community library, try tweakcn theming, and use the free Shadcraft registry. A simple way to trial the kit before upgrading.
Pricing
Upgrade anytime. Pay only the difference between products.
Select licence
Single
Team
Enterprise
For solo designers and developers
Fast support • Unlimited projects • Lifetime updates
Base
All official shadcn/ui components and blocks in Figma. Everything you need to start designing with a strong foundation.
Easy theming via tweakcn
All shadcn components
All shadcn 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.
Everything in Base
25+ Pro Components
117 Blocks to ship faster
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.
Everything in Pro
Pixel perfect design parity
Zero setup needed
Composable / extendible
Production ready blocks
Fully responsive
shadcn aligned tokens
CLI install & MCP support
Prices in USD.
Secure payment with Polar.sh
+
Free
Looking for a free option?
Access a curated set of shadcn components in the Figma community library, try tweakcn theming, and use the free Shadcraft registry. A simple way to trial the kit before upgrading.
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?
Can I upgrade later?
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?
Can I upgrade later?
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?
Can I upgrade later?
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?
Can I upgrade later?
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 UI Rules
Introducing UI 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.