47 lines
1.9 KiB
Plaintext
47 lines
1.9 KiB
Plaintext
---
|
||
title: December 2025 - npx shadcn create
|
||
description: Customize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.
|
||
date: 2025-12-12
|
||
---
|
||
|
||
From the very first commit, the goal of shadcn/ui was to make it customizable.
|
||
|
||
The idea is to give you solid defaults, spacing, color tokens, animations, accessibility, and then let you take it from there. Tweak the code. Add new components. Change the colors. Build your own version.
|
||
|
||
But somewhere along the way, all apps started looking the same. I guess the defaults were a little _too_ good. My bad.
|
||
|
||
Today, we're changing that: **npx shadcn create**.
|
||
|
||
Customize Everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.
|
||
|
||
We're starting with **5 new visual styles**, designed to help your UI actually feel like _your_ UI.
|
||
|
||
- **Vega** – The classic shadcn/ui look.
|
||
- **Nova** – Reduced padding and margins for compact layouts.
|
||
- **Maia** – Soft and rounded, with generous spacing.
|
||
- **Lyra** – Boxy and sharp. Pairs well with mono fonts.
|
||
- **Mira** – Compact. Made for dense interfaces.
|
||
|
||
**This goes beyond theming**.
|
||
|
||
Your config doesn't just change colors, it rewrites the component code to match your setup. Fonts, spacing, structure, even the libraries you use, everything adapts to your preferences.
|
||
|
||
The new CLI takes care of it all.
|
||
|
||
Start with a component library. Choose between Radix or Base UI.
|
||
|
||
We rebuilt every component for Base UI, keeping the same abstraction.
|
||
They are fully compatible with your existing components, even those pulled from remote registries.
|
||
|
||
When you pull down components, we auto-detect your library and apply the right transformations.
|
||
|
||
**It's time to build something that doesn't look like everything else.**
|
||
|
||
Now available for Next.js, Vite, TanStack Start and v0.
|
||
|
||
<Button asChild>
|
||
<Link href="/create" className="mt-6 no-underline!">
|
||
Get Started
|
||
</Link>
|
||
</Button>
|