Support for bases, styles, and icon libraries

shadcncraft now adapts to your project — base, style, and icon library, all picked up automatically from your shadcn config.

Previous

Our registry just evolved. shadcncraft components and blocks now adapt to your project's setup — your base, your style, your icon library — all picked up automatically from your shadcn config. Install something, and you get source that already matches the rest of your codebase. No find-and-replace afterwards. No fighting the defaults.

Until now, every item shipped as Radix UI with Lucide icons baked in. If your project ran on something else, the gap was yours to close.

You're still in charge

Your design system is yours. Your tokens, your fonts, your radius, your theme, your icons — none of that changes. What changed is that shadcncraft now meets you where you are instead of asking you to come to it.

  • Bases — Radix UI or Base UI. Same component API on both sides.
  • Styles — seven shadcn-compatible presets, each with its own feel:
    • Vega — the classic shadcn/ui look.
    • Nova — reduced padding and margins for compact layouts. The new default.
    • Maia — soft and rounded, with generous spacing.
    • Lyra — boxy and sharp. Pairs well with mono fonts.
    • Mira — compact. Made for dense interfaces.
    • Luma — fluid, luminous, and soft.
    • Sera — editorial and typographic.
  • Icon libraries — Lucide, Tabler Icons, Hugeicons, Phosphor Icons, or Remix Icon.

Whatever your components.json says, the install matches.

Try before you install

Every component and block page now has a live customizer — the same kind of experience you'll recognize from shadcn create. Swap bases, switch styles, change the icon library, tweak fonts and radius, preview a different shadcn theme, and even apply a tweakcn theme on top of it. See exactly what you're about to bring into your project before you bring it in.

What changed for installs

If you're already using shadcncraft, nothing breaks — your existing setup keeps working. To opt into the new behavior, point the registry at the style-aware URL:

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

That's the whole migration — one line. Existing projects keep working untouched, and the legacy styles (new-york, default, new-york-v4) resolve to the classic radix-vega variant. Move over whenever it suits you.

What's next: Figma and code, aligned

We're actively working to bring the two sides closer together. The goal is a Figma-to-code experience that feels as close to working in shadcn natively as possible: same primitives, same styles, same icons, same tokens — picked up automatically on both sides. Expect more updates here over the coming releases as we close the remaining gaps.

Try it

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.