Guides

Create and preview your own design system with shadcncraft create

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

Lu
Luis Llanes
3 min read
shadcncraft create

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:

  1. Resolve your current preset.
  2. Import the preset into shadcncraft create.
  3. Preview it on pro blocks.
  4. Adjust the config if needed.
  5. 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:

$ pnpm dlx shadcn@latest preset resolve

You can also use the alias:

$ pnpm dlx 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:

$ pnpm dlx shadcn@latest preset resolve -c apps/web

For machine-readable output:

$ pnpm dlx 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
$ pnpm dlx 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.

$ pnpm dlx 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:

$ pnpm dlx 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:

$ pnpm dlx 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:

$ pnpm dlx shadcn@latest apply b5Kc6P0Vc --only theme
$ pnpm dlx shadcn@latest apply b5Kc6P0Vc --only font
$ pnpm dlx 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.

Lu
Luis Llanes
Web Developer, shadcncraft

Join 3,000+ builders shipping with shadcncraft

Design and assemble full pages faster with production-ready blocks built for real products.

  • Production-ready blocks and components
  • Clean React and Tailwind parity
  • Built for SaaS, marketing, and ecommerce teams
Get the design system
Join Now CTA

Real support from the team behind shadcncraft

Get help within 24 hours from the people who build and maintain the system.

Email
Prefer a direct line? Send us a message and we'll get back to you as soon as possible.
Discord
Get quick support, share feedback, or connect with other builders.
Feedback
Got something to say about anything shadcncraft? We'd love to hear it.