Getting Started with shadcncraft in Figma

Using shadcncraft as a library

Step 1: Publish your library

1. Open your Figma file that contains all shadcncraft components and styles.
2. Go to the Assets panel (left sidebar) and click the book icon to open the Team Library modal.
3. Click Publish to turn your file into a reusable library.

Note: If it's your first time publishing the full shadcncraft Figma UI kit, it may take 5-30 minutes due to the number of components and variants. Keep Figma open during this process — closing the app may interrupt the upload.

Step 2: Enable the library in other projects

To use shadcncraft in another Figma file:

1. In the file browser, click All projects.
2. Click the dropdown arrow next to your team name and select View settings.
3. Under the Libraries or Shared section, click View team's libraries.
4. The library modal will open, showing a list of all available libraries.

Note: Each library listed corresponds to a Figma file that has published styles, components, and variables.

5. Click the name of any library to see its assets.
6. To manage access, click the toggle next to the library (it will say Off if not enabled).
7. Choose where the library should be available:
   • Design files
   • FigJam files
   • Slide decks
   • All files

For Organization and Enterprise plans see Figma's guide.

Step 3: Start designing

Once the library is enabled:

• You'll see all shadcncraft components and styles available in the Assets panel.
• Drag components directly into your canvas or apply styles as needed.
• When the main shadcncraft library gets updated, you'll be able to sync changes across your projects - keeping everything up to date automatically.

Which kit version am I using?

shadcncraft has two generations of the Figma UI kit — v2 and v3 — and the documentation is split accordingly. The quickest way to tell which one you have is the Figma variables panel.

1. Open the file's Local Variables panel
2. Look at the list of variable collections

You're on v3 if you see three collections — Tailwind, Style and Mode. The Style collection has a mode for each style: Nova, Vega, Maia, Lyra, Mira, Luma and Sera.

You're on v2 if you see four collections — Primitives, Theme, Mode and Pro.

In short: a Style collection means v3; a Theme collection means v2.

The shadcn theme import & export plugin also detects your version automatically. On v3 it opens with Styles, Themes and Code tabs; on v2 it shows Import theme, Export theme and Code.

Why use the shadcncraft Figma UI Kit as a library?

Using the shadcncraft Figma UI kit as a library makes it easier to scale consistent, high-quality UI across your team and projects. Here's what you gain:

• Design consistency: Keep your visual language aligned across files and teams.
• Faster workflow: Access pre-built, production-aligned components without rebuilding from scratch.
• Team sharing: Make the kit available across your org so everyone works from the same source of truth.
• Centralised updates: Publish changes once in the main file - all linked files stay in sync automatically.
• Flexible overrides: Customise components in individual projects without impacting the source library.

To update the library, just publish any changes made in your original shadcncraft file. It's the easiest way to evolve your design system while keeping every project connected to the latest version.

New to Figma?

If you're just getting started with Figma, check out these beginner-friendly resources:

• Figma help page
• Beginner's Guide to Figma (YouTube)
• Figma courses

Key concepts used in shadcncraft

Components

The kit is built entirely from Figma components - reusable blocks that help you maintain consistent layout and behaviour across your designs. Learn how components work in Figma.

Variants

Components in shadcncraft use variants to group related styles and states together (like sizes, disabled states, etc). This keeps your asset panel tidy and helps you work more efficiently. Learn more about variants in Figma.

Auto Layout

All components use Figma's Auto Layout system — so they adapt to content changes just like real frontend components. Buttons grow, inputs resize, and layouts reflow dynamically. Learn about Auto Layout.

Variables

Built on Figma's native variable system. shadcncraft uses variables for themes, spacing, colors, and more. This makes it easy to support light/dark modes, brand tokens, and responsive behaviour. Learn about Figma variables.

Styles

shadcncraft includes shared text and effect styles to help you maintain consistency. Styles can be applied and updated across entire projects with just a few clicks. Learn more about using styles.