Pick your shadcn base, your style, your icons

Source: Dev.to

Overview

shadcncraft now supports Base UI, all seven shadcn styles, multiple icon libraries, and a new customizer for previewing combinations before install. Your project’s configuration is now the source of truth, so components are installed to match your chosen defaults.

Supported Bases

• Radix UI
• Base UI

Both bases are fully supported.

Supported Styles

All seven shadcn presets are available:

If your project already uses one of these styles, shadcncraft follows it automatically. Custom styles created with shadcn can also be used.

Supported Icon Libraries

• Lucide
• Tabler Icons
• Hugeicons
• Phosphor Icons
• Remix Icon

Live Customizer

Each component and block page now includes a live customizer that lets you:

• Switch between Radix and Base UI
• Change the style preset
• Swap the icon library
• Adjust fonts and radius
• Apply shadcn or tweakcn themes

You can preview exactly what you’ll get before installing anything. The customizer works the same way as shadcn create, applied to every component and block.

Note: Some older blocks may not yet support every option. We are updating them over time and will indicate support clearly on each component and block page.

Enabling Style‑Aware Install

To make installs respect your chosen style, modify a single 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 all that’s required.

Conclusion

The new customizer brings shadcncraft closer to the workflow of shadcn create: same styles, same structure, same expectations. Your design system now behaves consistently in Figma and in code.

More updates are coming soon.