Question 1

What is shadcncraft?

Accepted Answer

shadcncraft is a production-ready design system built on shadcn/ui. It includes a Figma UI kit and matching React components with one-to-one alignment between design and code.

Design it once. Ship it exactly.

Question 2

Who is shadcncraft for?

Accepted Answer

shadcncraft is built for designers and developers working with shadcn/ui and Tailwind CSS who want to move faster without building a design system from scratch.

It’s commonly used by:

Product teams building SaaS applications and dashboards

Startups launching marketing sites and web apps quickly

Designers who want a structured Figma system aligned with production code

Developers using shadcn/ui who want production-ready blocks and components

Agencies and freelancers delivering client projects with a consistent UI foundation

If you're building with shadcn/ui, shadcncraft gives you the design system, blocks, and React components to design and ship faster.

Question 3

What's the difference between Base, Pro, and Pro + React?

Accepted Answer

Base includes all official shadcn/ui components and blocks recreated in Figma, along with design tokens and theming.

Pro includes everything in Base plus Pro components and blocks for marketing, ecommerce, and products and apps.

Pro + React includes everything in Pro plus matching production-ready React components, React blocks, and Sites.

See full details on the pricing page.

Question 4

Do the React components match the Figma kit?

Accepted Answer

Yes. Every React component has a direct Figma equivalent, and every Figma component maps to production-ready React.

There is no translation gap between design and development.

Question 5

Can I use shadcncraft for commercial work?

Accepted Answer

Yes. You can use shadcncraft in commercial work under the license terms.

Question 6

Can I upgrade later and only pay the difference?

Accepted Answer

Yes. You can upgrade at any time and only pay the difference between your current package and the new one.

Question 7

Is this a subscription?

Accepted Answer

No. shadcncraft is a one-time purchase with lifetime access and ongoing updates.

Question 8

What is included?

Accepted Answer

shadcncraft includes:

Base shadcn/ui Figma kit

Pro components and blocks

Marketing, application, and ecommerce blocks

Pro + React components

React blocks

Sites

The shadcncraft plugin

Question 9

What's free vs Base vs Pro vs Pro + React?

Accepted Answer

Free

Figma plugin

Limited starter components and blocks

Base

All official shadcn/ui components and blocks recreated in Figma

Design tokens and theming

Light and dark mode

Pro

Everything in Base

Pro components and blocks for marketing, ecommerce, and products and apps

Pro + React

Everything in Pro

Matching production-ready React components

React blocks

Sites

See full details on the pricing page.

Question 10

What is included in Base?

Accepted Answer

Base includes all official shadcn/ui components and blocks recreated in Figma, along with design tokens, theming, and light and dark mode support.

You can browse the components page for a closer look.

Question 11

What is included in Pro?

Accepted Answer

Pro includes everything in Base plus Pro components and blocks for marketing, ecommerce, and products and apps.

You can explore the blocks library for more detail.

Question 12

What is included in Pro + React?

Accepted Answer

Pro + React includes everything in Pro plus matching production-ready React components, React blocks, and Sites.

Browse components, blocks, and sites.

Question 13

Do I need React?

Accepted Answer

No. If you are designing in Figma only, Base or Pro may be enough.

If you want production-ready React components and blocks that match the Figma kit one-to-one, you will want Pro + React.

Question 14

Are React components included in Base or Pro?

Accepted Answer

No. React components, React blocks, and Sites are included in Pro + React.

Question 15

Is the free kit really free?

Accepted Answer

Yes. The free kit is distributed under the Figma Community license.

Theme import, export, and icon switching are free to use. React export and CLI generation require a Pro + React package.

Question 16

What's the difference between the free kit and Pro?

Accepted Answer

Free gives you the plugin and a limited starter set of components and blocks so you can explore the quality of the system.

Pro gives you the full Figma design system with Pro components and blocks for marketing, ecommerce, and products and apps.

If you want matching production-ready React components, React blocks, and Sites, that is included in Pro + React.

See full details on the pricing page.

Question 17

Can I use the free kit in commercial projects?

Accepted Answer

The free kit uses the Figma Community license.

For the exact permissions and restrictions, review the license terms before using it in commercial work.

Question 18

Can I upgrade later?

Accepted Answer

Yes. You can upgrade at any time and only pay the difference between your current package and the new one.

Question 19

How does shadcncraft work with Figma?

Accepted Answer

shadcncraft gives you a production-ready Figma UI kit built around shadcn/ui, with official components and blocks recreated in Figma for fast, consistent design work.

Because the system is aligned with the code version, designers and developers can work from the same foundation instead of translating between separate systems.

Question 20

What is included in the shadcncraft Figma UI kit?

Accepted Answer

The Figma UI kit includes official shadcn/ui components and blocks recreated in Figma, plus Pro components and blocks depending on your package.

It is built with variables, theming support, light and dark mode, and structured auto layout so it is ready to use in real product work.

Question 21

Can I theme shadcncraft components in Figma?

Accepted Answer

Yes. shadcncraft supports theming in Figma through variables and its integration with tweakcn.

You can apply preset themes, community themes, or your own custom themes to update the look and feel of the system much faster than editing styles manually.

Question 22

Does the kit use Figma variables?

Accepted Answer

Yes. Colors, spacing, typography, radius, and themes are built using variables aligned with shadcn conventions.

Question 23

Can I publish it as a Figma library?

Accepted Answer

Yes. You can publish it as a team library and enable it across multiple projects.

Question 24

Can I customize everything?

Accepted Answer

Yes. Tokens and variables are fully editable so you can build your own branded system on top.

Question 25

How do I publish the shadcncraft UI kit as a Figma library?

Accepted Answer

Publish the file as a standard Figma library, then enable it in the projects where your team needs access.

That gives you a shared source of truth for components, blocks, and themes across multiple files.

Question 26

How do I enable shadcncraft in multiple Figma projects?

Accepted Answer

Publish the kit as a library once, then enable that library anywhere you want to use it.

That keeps your components, blocks, and updates consistent across projects.

Question 27

Are the React components production ready?

Accepted Answer

Yes. They follow shadcn/ui structure and are built for real products.

Question 28

Does shadcncraft work for developers using shadcn/ui?

Accepted Answer

Yes. shadcncraft is built on top of shadcn/ui, so it fits naturally into teams already using that stack.

The main benefit is speed and alignment. Designers work from a Figma kit that mirrors the code, and developers get matching production-ready React components instead of rebuilding screens from scratch.

Question 29

What stack is used?

Accepted Answer

React

shadcn/ui

Tailwind CSS

Question 30

Can I modify the code?

Accepted Answer

Yes. The components are yours to adapt within your own products.

Question 31

Does this replace shadcn/ui?

Accepted Answer

No. shadcncraft builds on top of shadcn/ui and accelerates your workflow with production-ready components and blocks.

Question 32

What does the shadcncraft plugin do?

Accepted Answer

The plugin connects Figma directly to shadcn/ui workflows. You can:

Import from tweakcn

Log in to your tweakcn account

Apply preset, community, or custom themes

Export themes as shadcn/ui-compatible CSS

Copy CLI commands for shadcncraft components and blocks

Export structured React code from selected frames

Swap icon libraries across your entire file instantly

Question 33

What's the difference between tweakcn and shadcncraft?

Accepted Answer

shadcncraft and tweakcn are complementary tools, but they serve different purposes.

shadcncraft is a complete Figma UI kit and design system built for teams using shadcn/ui and Tailwind CSS. It gives you ready-to-use components, blocks, design tokens, and matching React assets so you can move from design to production faster.

tweakcn is focused on theming. It lets you customize the look and feel of your shadcn/ui project with theme presets, custom colors, and typography controls.

The shadcncraft plugin connects the two inside Figma, so you can import, apply, and export themes without manually updating every style.

In short, shadcncraft gives you the system. tweakcn gives you the theming layer.

Question 34

Which icon libraries can I switch between?

Accepted Answer

You can switch between all five shadcn/ui-supported libraries:

Lucide

Huge

Phosphor

Remix

Tabler

Switching updates every icon consistently across your design.

Question 35

Can I import and export themes?

Accepted Answer

Yes. You can import themes from tweakcn, use community presets, or apply custom themes.

You can export theme variables as production-ready CSS compatible with shadcn/ui.

Question 36

Does it support shadcn Create?

Accepted Answer

Yes. You can import and generate shadcn setups directly inside Figma.

Question 37

Does the plugin export real React code?

Accepted Answer

Yes. It exports structured React components aligned with shadcn/ui.

Question 38

Is the plugin free?

Accepted Answer

Theme import, export, and icon switching are free to use.

React export and CLI generation require a Pro + React package.

Question 39

Is this a subscription?

Accepted Answer

No. shadcncraft is a one-time purchase. You receive lifetime access to the tier you purchase, including future updates.

Question 40

Can I upgrade later and only pay the difference?

Accepted Answer

Yes. Upgrades are prorated. You only pay the difference between tiers.

Question 41

What do I get immediately after purchase?

Accepted Answer

Instant access to Figma files

React components if included in your tier

The shadcncraft plugin

All current blocks and updates

Question 42

Do I get lifetime updates?

Accepted Answer

Yes. All tiers include lifetime updates for the purchased tier.

Question 43

How does licensing work?

Accepted Answer

Licenses are per user. Each designer or developer using the Figma kit (as an editor), plugin, or React components needs the appropriate license.

Question 44

Can I use shadcncraft for commercial projects?

Accepted Answer

Yes. Commercial work is supported under the license terms.

Question 45

Can I resell or redistribute shadcncraft?

Accepted Answer

No. You cannot resell, redistribute, or publish shadcncraft as your own product or competing library.

Question 46

What happens if I violate the license?

Accepted Answer

If the license terms are violated, access to downloads, updates, and future releases may be revoked. In serious cases, legal enforcement may be pursued.

Question 47

Do you offer an affiliate program?

Accepted Answer

Yes. You can apply through the affiliate page.

Once approved, you will receive a unique referral link to share.

Question 48

How much commission do affiliates earn?

Accepted Answer

Affiliates earn 20 percent commission on every sale generated through their link. There is no cap on earnings.

Answers to common questions about shadcncraft

General

Products

Free

Figma

React and Code

Plugin

Pricing

Licensing

Affiliates

Join 3,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft