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 Figma, Pro Figma, and Pro Figma + React?

Accepted Answer

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

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

Pro Figma + React includes everything in Pro Figma 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 Figma + React components

React blocks

Sites

The shadcncraft plugin

Question 9

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

Accepted Answer

Free

Figma plugin

Limited starter components and blocks

Base Figma

All official shadcn/ui components and blocks recreated in Figma

Design tokens and theming

Light and dark mode

Pro Figma

Everything in Base Figma

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

Pro Figma + React

Everything in Pro Figma

Matching production-ready React components

React blocks

Sites

See full details on the pricing page.

Question 10

What is included in Base Figma?

Accepted Answer

Base Figma 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 Figma?

Accepted Answer

Pro Figma includes everything in Base Figma 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 Figma + React?

Accepted Answer

Pro Figma + React includes everything in Pro Figma 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 Figma or Pro Figma 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 Figma + React.

Question 14

Are React components included in Base Figma or Pro Figma?

Accepted Answer

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

Question 15

What are Agent Skills?

Accepted Answer

Agent Skills give your AI coding agent the context to build with shadcncraft correctly. Install them once, then describe what you want, and the agent reuses your real registry blocks, stays on your design tokens, and follows your conventions. There are two: Generate code and Import variables. See the Agent Skills overview.

Question 16

Which AI editors do they work with?

Accepted Answer

Claude Code, Cursor, and Codex. The skills follow the open Agent Skills standard and are tool-agnostic, so they work anywhere that reads a .claude/skills/ directory.

Question 17

How do I install them?

Accepted Answer

From your project root, run npx @shadcncraft/skills add all, then restart your editor. See the installation guide for per-skill, global, and manual options.

Question 18

How do I use a skill?

Accepted Answer

Describe the task in plain language (for example, "turn this Figma frame into code" or "sync my Figma variables into globals.css"), and the matching skill triggers automatically. You can also invoke one explicitly by name: in Claude Code, type it as a slash command (e.g. /shadcncraft-generate-code); in Cursor or Codex, reference the skill name in your prompt.

Question 19

Do I need a shadcncraft license?

Accepted Answer

The skills are free to install. Installing Pro blocks (used by Generate code) needs a SHADCNCRAFT\_LICENSE\_KEY set in your environment. Free-tier blocks work without one.

Question 20

Do I need the Figma plugin too?

Accepted Answer

No. The skills are the in-editor companion to the Figma plugin and complement it. Generate code uses the official Figma MCP to read your frames; the other skills do not need Figma at all.

Question 21

Will they overwrite my code?

Accepted Answer

No. The skills prefer installing registry blocks via the shadcn CLI, and Import variables only edits inside a marked managed region in your globals.css. Everything else is preserved.

Question 22

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 Figma + React package.

Question 23

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

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 Figma 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 Figma + React.

See full details on the pricing page.

Question 24

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 25

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 26

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 27

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 28

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 29

Does the kit use Figma variables?

Accepted Answer

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

Question 30

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 31

Can I customize everything?

Accepted Answer

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

Question 32

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 33

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 34

Are the React components production ready?

Accepted Answer

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

Question 35

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 36

What stack is used?

Accepted Answer

React

shadcn/ui

Tailwind CSS

Question 37

Can I modify the code?

Accepted Answer

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

Question 38

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 39

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 40

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 41

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 42

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 43

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 44

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 45

Does the plugin export real React code?

Accepted Answer

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

Question 46

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 Figma + React package.

Question 47

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 48

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 49

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 50

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 51

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 52

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 53

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 Figma + 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 54

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 55

Can I upgrade later and only pay the difference?

Accepted Answer

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

Question 56

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 57

Do I get lifetime updates?

Accepted Answer

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

Question 58

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 59

Can I use shadcncraft for commercial projects?

Accepted Answer

Yes. Commercial work is supported under the license terms.

Question 60

Can I resell or redistribute shadcncraft?

Accepted Answer

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

Question 61

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 62

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 63

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

Agent Skills

Free

Figma

React and Code

Plugin

Theme

Pricing

Licensing

Affiliates

Join 14,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft