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 Apps.

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

Apps

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

Apps

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 Apps.

Browse components, blocks, and apps.

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 Apps 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 Apps, 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

What is included in each Figma bundle?

Accepted Answer

The free starter includes a sample of components and blocks. Base Figma includes the official shadcn/ui component and block set in Figma. Pro Figma adds Pro components, blocks, and page designs. Pro Figma + React adds matching React components and blocks to the Pro Figma kit.

Compare the bundles to choose what you need. Pro React is a separate code-only bundle and does not include the Figma kit.

Question 27

Can I try the Figma kit before buying?

Accepted Answer

Yes. Get the free starter to try a sample of the kit. You can also use the Preview Pro link at the top of this page to inspect the Pro file before choosing a bundle.

Question 28

Are the featured apps, websites, and dashboards included in every bundle?

Accepted Answer

No. ClearFlow's Figma design is included in Pro Figma and Pro Figma + React; its React website is included in Pro React and Pro Figma + React. AI Chat follows the same split: its Figma design is included in Pro Figma and Pro Figma + React; its React app is included in Pro React and Pro Figma + React.

The sales and marketing dashboard is shown as a preview. Check the current Pro Figma preview for available designs before buying. Base Figma and the free starter do not include the full Pro collection.

Question 29

Do I need a paid Figma plan?

Accepted Answer

Publishing the kit as a shared team library and working with multiple variable modes require a paid Figma plan. Figma's Starter plan does not include team libraries. Your shadcncraft purchase does not include a Figma subscription.

Check Figma's current plan features for library access and variable mode limits before choosing your setup. The free starter lets you try the kit in your workspace first.

Question 30

Can I use the kit for commercial and client projects?

Accepted Answer

Yes. The license allows personal and commercial projects, including client work. You cannot resell or redistribute the kit as a library or competing product. Each person with edit access to the shadcncraft Figma file needs a seat. Read the license for the full terms.

Question 31

Are updates included, and how do I get them?

Accepted Answer

Paid bundles include lifetime updates for the purchased tier. Download the latest files through your original purchase receipt or your Polar account.

Updates do not automatically replace your customized Figma file. Bring the changes you need into your existing library, then publish those changes for your team. See the Figma update guide for the process.

Question 32

Can I customize the kit and publish it as a team library?

Accepted Answer

Yes. You can edit the components, styles, and variables to match your brand. On a Figma plan that supports shared libraries, publish your customized file and enable it in your team's projects. Follow the Figma setup guide to get started.

Question 33

Are the React components production ready?

Accepted Answer

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

Question 34

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 35

What stack is used?

Accepted Answer

React

shadcn/ui

Tailwind CSS

Question 36

Can I modify the code?

Accepted Answer

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

Question 37

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 38

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 39

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 40

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 41

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 42

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 43

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 44

Does the plugin export real React code?

Accepted Answer

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

Question 45

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 46

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 47

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 48

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 49

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 50

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 51

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 52

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 53

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 54

Can I upgrade later and only pay the difference?

Accepted Answer

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

Question 55

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 56

Do I get lifetime updates?

Accepted Answer

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

Question 57

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 58

Can I use shadcncraft for commercial projects?

Accepted Answer

Yes. Commercial work is supported under the license terms.

Question 59

Can I resell or redistribute shadcncraft?

Accepted Answer

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

Question 60

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 61

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 62

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 16,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft