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 UI 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 UI 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 UI 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 Figma 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 Figma UI 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 UI 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:

Create complete shadcn styles, including color palette, radius, typography, and icon set

Move styles between Figma and shadcn Create with preset codes

Import themes from tweakcn, using presets, a custom URL, or your saved themes

Import a theme straight from a shadcn/ui globals.css

Export any style's theme as shadcn/ui-compatible CSS

Export structured React code from selected frames

Copy CLI commands for shadcncraft components and blocks

Question 33

Does it support shadcn Create?

Accepted Answer

Yes. Every style has a matching shadcn preset code, the same code shadcn Create uses. Paste a preset to rebuild that style in Figma, or copy a style's preset code from Figma to use it in your shadcn/ui project. It works as a two-way bridge between Figma and shadcn Create.

Question 34

Can I create my own shadcn styles?

Accepted Answer

Yes. The plugin ships with eight styles (Nova, Vega, Maia, Lyra, Mira, Luma, Sera, and Rhea) and lets you build your own. A style is a complete visual language: color palette, radius scale, typography, and icon set, stored as native Figma variables. Switch a style and the whole file re-themes instantly.

Question 35

What's the difference between tweakcn and shadcncraft?

Accepted Answer

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

shadcncraft is a production-ready shadcn/ui design system. It gives you a fully matched Figma UI kit, React components, and hundreds of UI blocks built for real products, so teams 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 36

Which icon libraries can I use?

Accepted Answer

Each style sets its own icon library, the same way shadcn/ui works. You can choose from five built-in libraries:

Lucide

HugeIcons

Phosphor

Remix

Tabler

You can also bring your own custom icon library. Every icon across the kit follows the style's choice.

Question 37

Can I import and export themes?

Accepted Answer

Yes. Import themes from tweakcn (presets, a custom URL, or your saved themes), or straight from a shadcn/ui globals.css. Layer any of them over a style.

Export any style's theme as production-ready CSS, compatible with shadcn/ui and Tailwind v4.

Question 38

Does the plugin export real React code?

Accepted Answer

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

Question 39

Is the plugin free?

Accepted Answer

Creating styles, importing and exporting themes, and exporting CSS are all free to use.

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

Question 40

What is a shadcn/ui theme?

Accepted Answer

A shadcn/ui theme is a set of design tokens that controls how every shadcn component looks. It covers colors (background, foreground, primary, secondary, accent, destructive, muted, border, ring), radius, spacing, and typography.

A theme is layered on top of a base style. The style sets the foundation (palette, fonts, icon set, scale) and the theme adjusts specific tokens on top of it. The same theme can drive a Figma file and a shadcn/ui React project.

Question 41

How does shadcncraft handle theming across Figma and code?

Accepted Answer

shadcncraft themes shadcn/ui end to end. In Figma, every theme lives as a native variable mode in the Figma UI kit. In code, the same tokens drive shadcncraft Pro components and blocks.

The two sides stay in sync via shadcn Create preset codes: copy a preset from Figma into your project, or paste a project's preset into Figma via the shadcncraft plugin, and the same theme applies on both sides. No manual translation between design and code.

Question 42

Does theming apply to Pro components and blocks too?

Accepted Answer

Yes. shadcncraft Pro components, blocks, and page templates use the same semantic shadcn theme tokens as the base shadcn/ui components, the ones shadcn writes into your globals.css. Whatever theme your project already has drives the whole library, light and dark. There is no separate theme system to wire up.

Question 43

How do I create a custom shadcn theme?

Accepted Answer

Open shadcncraft Create, pick a style as your starting point, then adjust the tokens you want to change. You can edit colors directly, adjust the radius scale, change the typography, or paste in a tweakcn preset to use as a base.

Every change updates the live component preview in real time. When you're happy, export to React, copy the shadcn Create preset, or open the theme inside Figma via the shadcncraft plugin.

Question 44

Does shadcncraft support dark mode?

Accepted Answer

Yes. Every shadcncraft theme ships with paired light and dark modes that are tuned together. Switch the active mode and the whole library, Pro components and blocks included, picks up the right values. The same tokens drive both modes in Figma and in code.

Question 45

Can I use my shadcncraft theme in Figma?

Accepted Answer

Yes. Themes built in shadcncraft Create can be opened inside Figma using the shadcncraft plugin. The plugin imports your theme as native Figma variables and layers it over any of the eight styles, so the same theme drives both your code and your designs.

You can also go the other way: build a theme in Figma, copy its shadcn Create preset code, and use it in your shadcn/ui project.

Question 46

Is shadcncraft Create free?

Accepted Answer

Yes. shadcncraft Create is free to use. You can build a theme, preview components live across all seven styles, and export it as a production-ready globals.css for your shadcn/ui project at no cost.

A Pro + React package is required for React code export from Figma and for CLI install commands. Theme creation, preview, and CSS export are always free.

Question 47

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 48

Can I upgrade later and only pay the difference?

Accepted Answer

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

Question 49

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 50

Do I get lifetime updates?

Accepted Answer

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

Question 51

How does licensing work?

Accepted Answer

A license covers seats. You need a seat for each person who has edit access to the shadcncraft Figma file, uses the Figma plugin, or installs or customizes components from the registry (anyone holding registry credentials).

Developers who only build or maintain a codebase that already has shadcncraft components installed do not need a seat. Once components are installed from the registry, that code is yours as part of your product.

Question 52

Can I use shadcncraft for commercial projects?

Accepted Answer

Yes. Commercial work is supported under the license terms.

Question 53

Can I resell or redistribute shadcncraft?

Accepted Answer

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

Question 54

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 55

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 56

How much commission do affiliates earn?

Accepted Answer

Affiliates earn 20% 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

Theme

Pricing

Licensing

Affiliates

Join 9,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft