shadcn/ui Is Now a Full Project Generator – Not Just Components!

We all use shadcn/ui to quickly add components to our projects, but there's always been one problem: most projects end up looking identical. Today, that changes completely.

shadcn/ui has just launched npx shadcn create – an interactive generator that creates a 100% custom Design System from scratch, not just copy-pasted components.

Real Design Styles (Not Just Color Changes)

The Big Difference: Style Changes the Code Itself

Previously, customizing shadcn meant changing colors in your CSS variables. Now, the style actually rewrites the component code – spacing, structure, fonts, everything.

This means: "Same component, but different code depending on the style you choose."

The Five New Visual Styles

shadcn/ui now offers 5 distinct visual styles, each with its own personality:

1. Vega – The Classic Look The familiar shadcn/ui aesthetic we all know and love

// Vega style - balanced spacing and rounded corners
<Button className="px-4 py-2 rounded-md">
  Click Me
</Button>

2. Nova – Compact and Dense Reduced padding and margins for compact layouts

// Nova style - tighter spacing, minimal padding
<Button className="px-3 py-1.5 rounded">
  Click Me
</Button>

3. Maia – Soft and Spacious Soft and rounded, with generous spacing

// Maia style - generous padding, larger radius
<Button className="px-6 py-3 rounded-xl">
  Click Me
</Button>

4. Lyra – Sharp and Boxy Boxy and sharp design that pairs perfectly with monospace fonts

// Lyra style - minimal rounding, geometric feel
<Button className="px-4 py-2 rounded-sm font-mono">
  Click Me
</Button>

5. Mira – Ultra Compact Compact, made for dense interfaces

// Mira style - maximum density, minimal spacing
<Button className="px-2 py-1 rounded text-sm">
  Click Me
</Button>

Smart Choices During Creation

When you run npx shadcn create, you'll be guided through an interactive setup:

Component Library Choice

Radix UI (The Previous Default)

Low-level, unstyled components with strong accessibility
Battle-tested and mature
Wide adoption and community support

Base UI (The New Official Option)

Built by the same team that created Radix, actively maintained with similar API
Offers modern primitives and features that Radix lacks, like multi-select and non-dialog combobox
Easier migration path from Radix

# Example with Base UI
npx shadcn create my-app vega --base-ui

Base Colors

Choose from professional color foundations:

Gray – Neutral and versatile
Zinc – Modern and cool-toned
Stone – Warm and earthy
Neutral – Balanced and timeless

// Your tailwind.config.ts gets auto-configured
export default {
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        // ... all your color tokens
      }
    }
  }
}

Icon Libraries

Pick your preferred icon set:

Lucide – Clean and modern (most popular)
Tabler – Comprehensive icon collection
Heroicons – Tailwind's official icons

// Automatically configured based on your choice
import { CheckIcon, XIcon } from 'lucide-react';
// or
import { CheckIcon, XIcon } from '@tabler/icons-react';
// or
import { CheckIcon, XIcon } from '@heroicons/react/24/outline';

Font Configuration

Choose from system fonts and monospace options:

/* System fonts for performance */
font-family: system-ui, -apple-system, sans-serif;

/* Or monospace for code-heavy apps */
font-family: 'JetBrains Mono', 'Fira Code', monospace;

Border Radius Options

Small – Subtle, minimal rounding
Medium – Balanced (default)
Large – Pronounced, friendly curves

Can't decide? There's a Shuffle button to try random combinations until you find the perfect look!

The Big Shift: Moving Away from Radix UI

Why the Change?

Radix UI has maintenance concerns - updates have become infrequent, and some bugs remain unfixed for extended periods

The creator of shadcn/ui acknowledges the situation and recommends sticking with Radix for existing projects but considering alternatives for new ones

Base UI to the Rescue

Base UI is built by the same team that created Radix and offers a similar API, making migration relatively easy

Key Advantages:

Actively maintained with frequent updates
Provides features Radix lacks, such as multi-select and improved component APIs
Modern architecture with render props
Single dependency instead of multiple @radix-ui/react-* packages

Migration Example:

// Before (Radix UI)
import * as Select from '@radix-ui/react-select';

<Select.Root>
  <Select.Trigger asChild>
    <button>Select...</button>
  </Select.Trigger>
  <Select.Content>
    <Select.Viewport>
      <Select.Item value="1">Option 1</Select.Item>
    </Select.Viewport>
  </Select.Content>
</Select.Root>

// After (Base UI)
import { Select } from '@base-ui-components/react';

<Select.Root>
  <Select.Trigger render={(props) => <button {...props}>Select...</button>}>
  </Select.Trigger>
  <Select.Popup>
    <Select.Item value="1">Option 1</Select.Item>
  </Select.Popup>
</Select.Root>

Good News: shadcn/ui's modular design allows users to own and modify the code, so if issues arise with any library, parts can be swapped out

New Components Added to the Library

shadcn/ui has added several universal components that work with every component library - Radix, Base UI, React Aria, and more

Spinner Component

An indicator to show loading states

import { Spinner } from "@/components/ui/spinner";
import { Button } from "@/components/ui/button";

// Basic usage
export function LoadingState() {
  return (
    <div className="flex items-center justify-center">
      <Spinner />
    </div>
  );
}

// With button
export function LoadingButton() {
  return (
    <Button disabled>
      <Spinner className="mr-2" />
      Loading...
    </Button>
  );
}

Kbd Component

Display keyboard keys or groups of keys

import { Kbd, KbdGroup } from "@/components/ui/kbd";

export function KeyboardShortcut() {
  return (
    <div className="flex flex-col gap-4">
      {/* Mac modifiers */}
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
      
      {/* Windows/Linux */}
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>Shift</Kbd>
        <span>+</span>
        <Kbd>K</Kbd>
      </KbdGroup>
    </div>
  );
}

ButtonGroup Component

A container for grouping related buttons with consistent styling, great for action groups and split buttons

import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { SaveIcon, DownloadIcon, ShareIcon } from "lucide-react";

export function ActionButtons() {
  return (
    <ButtonGroup>
      <Button variant="outline">
        <SaveIcon className="mr-2 h-4 w-4" />
        Save
      </Button>
      <Button variant="outline">
        <DownloadIcon className="mr-2 h-4 w-4" />
        Download
      </Button>
      <Button variant="outline">
        <ShareIcon className="mr-2 h-4 w-4" />
        Share
      </Button>
    </ButtonGroup>
  );
}

InputGroup Component

Input fields enhanced with icons, buttons, labels and more

import { InputGroup } from "@/components/ui/input-group";
import { SearchIcon } from "lucide-react";

export function SearchInput() {
  return (
    <InputGroup>
      <InputGroup.Icon>
        <SearchIcon className="h-4 w-4" />
      </InputGroup.Icon>
      <InputGroup.Input placeholder="Search..." />
    </InputGroup>
  );
}

Field Component

One component for all your form needs - combines labels, inputs, descriptions, and error messages

import { 
  Field, 
  FieldLabel, 
  FieldDescription,
  FieldGroup 
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function FormField() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="email">
          Email Address
        </FieldLabel>
        <FieldDescription>
          We'll never share your email with anyone
        </FieldDescription>
        <Input 
          id="email" 
          type="email" 
          placeholder="you@example.com" 
        />
      </Field>
    </FieldGroup>
  );
}

Item and Empty Components

Display lists of items, cards, and empty states consistently

import { Item } from "@/components/ui/item";
import { Empty } from "@/components/ui/empty";

export function UserList({ users }) {
  if (users.length === 0) {
    return (
      <Empty
        title="No users found"
        description="Try adjusting your search criteria"
      />
    );
  }
  
  return (
    <div className="space-y-2">
      {users.map(user => (
        <Item key={user.id}>
          <Item.Avatar src={user.avatar} />
          <Item.Content>
            <Item.Title>{user.name}</Item.Title>
            <Item.Description>{user.email}</Item.Description>
          </Item.Content>
        </Item>
      ))}
    </div>
  );
}

How to Use It?

Step 1: Visit the Official Site

Go to ui.shadcn.com/create and click +New Project

Step 2: Customize Your Design System

Choose your:

Visual style (Vega, Nova, Maia, Lyra, or Mira)
Component library (Radix UI or Base UI)
Base colors (gray, zinc, stone, neutral)
Icon library (Lucide, Tabler, Heroicons)
Fonts (system fonts + mono options)
Border radius (small, medium, large)

Step 3: Generate and Run

Copy the generated command and run it:

npx shadcn create my-app vega --base-ui

Navigate to your project and start:

cd my-app
npm install
npm run dev

Supported Frameworks

Now available for Next.js, Vite, TanStack Start, and v0

For Next.js:

npx shadcn create my-nextjs-app vega

For Vite:

npx shadcn create my-vite-app nova --template vite

For TanStack Start:

npx shadcn create my-tanstack-app maia --template tanstack-start

The Bottom Line

shadcn/ui has solved the "every website looks the same" problem fundamentally. You now have a custom Design System that's truly yours.

What This Means: ✨ Your config doesn't just change colors – it rewrites component code
✨ Five distinct visual styles for different design personalities
✨ Choice between Radix UI (mature) and Base UI (modern, actively maintained)
✨ Complete control over typography, spacing, and structure
✨ New universal components that work with any library

The Future is Bright: With Base UI being actively maintained by the same team that built Radix, and shadcn/ui's modular architecture, you can build confident knowing you have flexibility to adapt as the ecosystem evolves.