Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image

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 payment

One payment • One year of updates

One payment • One year of updates

Top design and dev teams use Shadcraft to ship shadcn/ui faster.

Built for

d

e

s

i

g

n

e

r

s

.

d

e

s

i

g

n

e

r

s

.

d

e

s

i

g

n

e

r

s

.

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.

Oct 22, 2025

Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.

Oct 22, 2025

Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.

Oct 22, 2025

Beautifully done. Great job. A well-designed ecosystem of tools for building with shadcn/ui.

Oct 22, 2025

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

Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

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.