DEV Community: shadcncraft

Create and preview your own design system with shadcncraft create

shadcncraft — Thu, 30 Apr 2026 00:52:25 +0000

shadcncraft create mirrors shadcn create, with the same styles, bases, icon libraries, themes, fonts, and preset workflow, plus live previews of shadcncraft pro blocks.

shadcncraft now has its own create experience.

It mirrors shadcn create: same styles, same bases, same icon libraries, same themes, same fonts, same radius, same preset codes.

The difference is the preview. On shadcncraft create, you can test those combinations directly on shadcncraft pro blocks before installing anything.

If you already have a shadcn project, you can also resolve its current preset with the shadcn CLI, import it into shadcncraft create, and preview your existing design system on real pro blocks.

The workflow

If you already have a shadcn project:

Resolve your current preset.
Import the preset into shadcncraft create.
Preview it on pro blocks.
Adjust the config if needed.
Use the new preset with init or apply.

If you are starting fresh, skip the first step and build a preset directly in shadcncraft create.

Resolve your current preset

From your existing shadcn project, run:

npx shadcn@latest preset resolve

You can also use the alias:

npx shadcn@latest preset info

The CLI reads your current shadcn config and returns the matching preset code.

Example:

Preset
  code         b5Kc6P0Vc
  version      b
  style        luma
  baseColor    olive
  theme        lime
  chartColor   sky
  iconLibrary  hugeicons
  font         geist
  fontHeading  inherit
  radius       default
  menuAccent   subtle
  menuColor    default
  url          https://ui.shadcn.com/create?preset=b5Kc6P0Vc

The important part is the code:

b5Kc6P0Vc

That code contains the visual setup: style, theme, colors, fonts, radius, icons, and other preset settings.

For monorepos, point the command at the app:

npx shadcn@latest preset resolve -c apps/web

For machine-readable output:

npx shadcn@latest preset resolve --json

Import it into shadcncraft create

Presets are fully compatible between shadcn create and shadcncraft create.

If you made a preset on ui.shadcn.com/create, you can import it into shadcncraft create. If you resolved one from an existing project, import that too.

The importer accepts:

A bare preset code
A --preset <code> flag
A full shadcn init --preset <code> command

Open shadcncraft create, choose the open preset option, and paste any of these:

b5Kc6P0Vc

--preset b5Kc6P0Vc

npx shadcn@latest init --preset b5Kc6P0Vc

shadcncraft create extracts the preset code and applies the same config to the customizer.

Now your existing shadcn setup is loaded into the preview.

Preview real pro blocks

The point of shadcncraft create is the block preview.

Preview your preset across real shadcncraft pro blocks: marketing, application, and ecommerce. Small component previews help, but blocks expose the full system.

You can keep adjusting:

Base: Radix UI or Base UI
Style: Vega, Nova, Maia, Lyra, Mira, Luma, or Sera
Icon library: Lucide, Tabler Icons, Hugeicons, Phosphor Icons, or Remix Icon
Theme, base color and chart color
Font and heading font
Radius
Menu accent and menu color

Create a new project

Once the preview feels right, use the preset with init.

npx shadcn@latest init --preset b5Kc6P0Vc

This creates a new project with the selected style, theme, fonts, radius, icons, and preset settings from the start.

You can also include a template:

npx shadcn@latest init --template next --preset b5Kc6P0Vc

Same shadcn CLI. Same preset resolver. shadcncraft create just gives you a better way to choose before running the command.

Apply it to an existing project

Presets are not only for new projects.

To update an existing shadcn project, apply the preset:

npx shadcn@latest apply b5Kc6P0Vc

This updates the project to match the preset, including theme, colors, CSS variables, fonts, icons, and detected UI components.

You can also apply only the parts you want:

npx shadcn@latest apply b5Kc6P0Vc --only theme

npx shadcn@latest apply b5Kc6P0Vc --only font

npx shadcn@latest apply b5Kc6P0Vc --only theme,font

That makes it easy to test a new visual direction without rebuilding the project.

Why this matters

The new shadcn preset commands make your current project portable.

preset resolve and preset info turn an existing project into a preset code.

shadcncraft create can import that code and apply the same config to the live customizer.

Then you can preview your existing design system against shadcncraft pro blocks before changing anything in your app.

Resolve the preset. Open it in shadcncraft create. Preview real pro blocks. Then create, apply, or share the setup.

Try it

Open shadcncraft create, pick a pro block, and start switching styles, bases, icons, themes, fonts, and radius.

When the preview looks right, copy the preset.

Create a new project with it, apply it to an existing one, or import it back into shadcn create.

Same shadcn foundation. Same preset workflow. Now with shadcncraft pro blocks in the preview.

Pick your shadcn base, your style, your icons

shadcncraft — Tue, 28 Apr 2026 02:48:39 +0000

shadcncraft now supports Base UI, all seven shadcn styles, multiple icon libraries, and a new customizer for previewing combinations before install.

shadcncraft now adapts to your setup.

Choose your base, style, and icon library, and everything follows. A new customizer lets you preview combinations live.

Until now, every component shipped with fixed defaults: Radix UI, the standard shadcn look, and Lucide icons. If your project used something else, you had to adjust it after install.

That is no longer the case. shadcncraft now respects your project config from the start.

Your project defines the defaults

Your setup is the source of truth. The registry reads what you've chosen and installs components to match:

Base — Radix UI and Base UI, both fully supported.
Style — all seven shadcn presets.
Icons — Lucide, Tabler Icons, Hugeicons, Phosphor Icons, and Remix Icon.

Tokens, fonts, radius, and themes remain unchanged. Nothing gets overridden.

Built on shadcn styles

These styles come directly from shadcn. Same presets, same output.

Vega — classic shadcn look.
Nova — tighter spacing, more compact.
Maia — softer and more rounded.
Lyra — sharp and structured.
Mira — dense and product-focused.
Luma — softer and more fluid.
Sera — editorial and typographic.

If your project already uses one of these, shadcncraft follows it. If not, you can try them across the library.

Custom styles from shadcn create also work.

Preview every combination

Each component and block page now includes a live customizer.

You can:

Switch between Radix and Base UI
Change styles
Swap icon libraries
Adjust fonts and radius
Apply shadcn or tweakcn themes

This is the same model as shadcn create, applied to every component and block.

You can see exactly what you'll get before installing anything.

Works across the library

Support is library-wide. Components and blocks are built to follow your config.

Some older blocks may not support every option yet. We're updating those over time and will surface support more clearly on each component and block page.

One-line migration

Nothing breaks if you're already using shadcncraft.

To enable style-aware install, change one line in components.json:

{
  "registries": {
    "@shadcncraft": {
-     "url": "https://shadcncraft.com/r/{name}",
+     "url": "https://shadcncraft.com/r/{style}/{name}",
      "headers": {
        // ... your existing headers ...
      }
    }
  }
}

That's it.

Try it

Try the customizer on a live pro block. You can test different bases, styles, icons, and themes in our pro components and blocks before installing.

Where this is going

This brings shadcncraft closer to how shadcn create works.

Same styles. Same structure. Same expectations.

The goal is simple: your design system behaves the same in Figma and in code.

More updates coming soon.

Introducing shadcncraft

shadcncraft — Wed, 08 Apr 2026 06:37:08 +0000

New name, new website, bigger vision

Today we’re launching a new name, a new brand, and a completely rebuilt website.

Shadcraft is now shadcncraft.

This change reflects what the product has become and where it is going next.

Why the rename

From the beginning, the goal was simple: build the best design system built on top of shadcn/ui.

Over time the product grew beyond a simple Figma UI kit. It became a full ecosystem built around the shadcn stack, including:

A React component library
A matching Figma design system
Hundreds of production ready UI blocks
A plugin for importing and exporting themes
Tools designed to work naturally with modern AI coding workflows

The new name makes that connection clear.

shadcncraft reflects what the product actually is: carefully crafted design system tools built specifically for the shadcn ecosystem.

A completely new website

Alongside the rename, we’ve rebuilt the entire website from scratch.

The old site did not reflect the scope of the product anymore. It focused heavily on the Figma kit and did not show the full design system.

The new site fixes that.

It clearly shows what shadcncraft provides:

React components ready for production
Matching Figma design files
Hundreds of blocks across marketing, application, and ecommerce
Full sites and templates
Design tokens and theming tools

Everything is now easier to explore, preview, and understand.

The new structure also makes it much easier to browse blocks, pages, and full site templates.

Built for modern workflows

Frontend development is changing quickly.

Tools like Cursor, Claude Code, v0, and Figma Make are reshaping how developers and designers work together.

Design systems now need to support both humans and AI.

shadcncraft is designed for that new workflow.

The system is built around:

Clean React components
Structured design tokens
Predictable theming
Consistent naming and patterns

This makes it easier for developers, designers, and AI tools to generate high quality UI.

React and Figma working together

One of the biggest goals for shadcncraft is tight alignment between design and code.

Every block and component exists in both places:

React code ready to install
Matching Figma components

Designers can work in Figma while developers install the exact same blocks into their projects using the CLI.

No guesswork. No rebuilding UI from scratch.

What stays the same

Even with the new name and brand, the core philosophy remains the same.

shadcncraft is still focused on:

Clean, production ready UI
No unnecessary abstraction
Simple installation via the shadcn CLI
Full ownership of the code you install

You get real components you can ship to production, not locked templates or proprietary frameworks.

What’s coming next

The rebrand and website launch are just the beginning.

There is a lot more coming:

More blocks across all categories
More full site templates
Deeper theming support
Improvements to the plugin
Tighter integration with modern AI coding tools

The goal remains simple: make it dramatically faster to design and ship high quality interfaces with shadcn.

Thank you

A huge thank you to everyone who has supported the project so far.

Thousands of designers and developers have already used the kit, shared feedback, and helped shape what shadcncraft is becoming.

If you have not explored the new site yet, take a look and see what is new.

New way to bring your tweakcn themes into Figma (works with shadcn/ui)

shadcncraft — Sun, 03 Aug 2025 21:22:47 +0000

Hey folks 👋🏻

If you’ve been using tweakcn to customise your shadcn/ui theme in the browser, you can now bring those themes straight into Figma via a new integration with Shadcraft and the tweakcn plugin.

Here’s how it works:

🎨 tweakcn is a super handy in-browser theming tool for shadcn/ui (great for quickly testing out colour, radius, shadow, etc.)
🔌 With the plugin, you can now apply your custom theme to a Figma UI kit built specifically for Tailwind and shadcn-based projects
⚡ It’s all powered by Figma variables, so you can instantly switch between themes or update styles without tedious overrides

It’s been a smoother handoff experience for us working across dev/design — especially when devs pick the theme in tweakcn and designers apply it in Figma.

You can try it out at tweakcn.com — happy to answer questions or share how we’ve been using it in side projects too.