A shadcn/ui Figma UI kit styled in seconds

Save hours of manual theming. Instantly style every shadcn/ui component with tweakcn’s ready-made or custom themes and keep your design system perfectly in sync.

Trusted by top designers

Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image
Female avatar image
Male avatar image
Male avatar image
Male avatar image
Male avatar image

Themes for any brand or project

The tweakcn plugin instantly themes your Shadcraft Figma UI Kit, and you can load your own custom themes from the tweakcn website too.

shadcn/ui dashboard theme 1
shadcn/ui dashboard theme 1
shadcn/ui dashboard theme 1

Trusted by teams from

Trusted by teams from

User Megan light
User Megan light
User Megan light
User shadcn light
User shadcn light
User shadcn light

Everything you need, styled your way

Everything you need, styled your way

Build faster with the complete set of shadcn/ui components and blocks, crafted to match the code library your developers use. Bring consistency to every project and theme your entire system in seconds with tweakcn so your work always looks on-brand, light or dark.

Build faster with the complete set of shadcn/ui components and blocks, crafted to match the code library your developers use. Bring consistency to every project and theme your entire system in seconds with tweakcn so your work always looks on-brand, light or dark.

+

Figma Make & Sites-ready

Figma Make & Sites-ready

Shadcraft works seamlessly in Figma Make and Figma Sites, meaning you can focus on building with the your themed library immediately with no setup.

Shadcraft works seamlessly in Figma Make and Figma Sites, meaning you can focus on building with the your themed library immediately with no setup.

Figma Make screenshot
Figma Make screenshot
Figma Make screenshot

Export to Figma Make

Easily export your themed Shadcraft library to use in your Make vibe coding apps. No extra setup required.

Figma Sites screenshot
Figma Sites screenshot
Figma Sites screenshot

Use in Figma Sites

Turn Shadcraft into a design library for your Sites projects, so your web builds stay consistent and on-brand.

Deliver 10x faster

Shadcraft comes packed with value

51 components

The complete suite of high quality shadcn components

51 components

The complete suite of high quality shadcn components

51 components

The complete suite of high quality shadcn components

Dark mode

Switch to dark mode instantly using Variables

Dark mode

Switch to dark mode instantly using Variables

Dark mode

Switch to dark mode instantly using Variables

44 Blocks

All official blocks. Flexible, composable and themeable

44 Blocks

All official blocks. Flexible, composable and themeable

44 Blocks

All official blocks. Flexible, composable and themeable

1500 icons

Lucide and social, platform and app icons

1500 icons

Lucide and social, platform and app icons

1500 icons

Lucide and social, platform and app icons

Built for

Designers

Enhance your design process with pre-made components and templates that boost efficiency and consistency.

Designers

Enhance your design process with pre-made components and templates that boost efficiency and consistency.

Designers

Enhance your design process with pre-made components and templates that boost efficiency and consistency.

Freelancers

Jumpstart your projects with a quick-start design framework, saving time on repetitive tasks and unleashing your creativity.

Freelancers

Jumpstart your projects with a quick-start design framework, saving time on repetitive tasks and unleashing your creativity.

Freelancers

Jumpstart your projects with a quick-start design framework, saving time on repetitive tasks and unleashing your creativity.

Startups

Accelerate your product development with ready-to-use design elements that ensure a cohesive brand presence from day one.

Startups

Accelerate your product development with ready-to-use design elements that ensure a cohesive brand presence from day one.

Startups

Accelerate your product development with ready-to-use design elements that ensure a cohesive brand presence from day one.

Agencies

Maintain consistency across multiple projects and clients with a UI kit that enhances productivity and delivers high-quality designs faster.

Agencies

Maintain consistency across multiple projects and clients with a UI kit that enhances productivity and delivers high-quality designs faster.

Agencies

Maintain consistency across multiple projects and clients with a UI kit that enhances productivity and delivers high-quality designs faster.

Pricing

Pricing

Pricing

What you get with Shadcraft

All 51 Components

All 44 Blocks

1500+ icons

Light & dark mode

Figma Make & Sites-ready

Use in unlimited projects

Interactions

Figma variables

$89

$119

One time payment.
Launch discount ends soon

Prices in USD.

Prices in USD.

Prices in USD.

Secure payment with Lemon Squeezy

Secure payment with Lemon Squeezy

Stay in the know

Stay in the know

Keep updated on all things happening with Shadcraft

Keep updated on all things happening with Shadcraft

FAQ

FAQ

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?

© shadcraft 2025