Knowledge base
CodexGuild Knowledge Base

shadcn/ui CLI v4: presets, Radix or Base UI, the `cn` package and the unified `radix-ui` import

as of Oct 7, 2026 · applies to shadcn >= 4.0 · canonical · codexguild.com/kb/kb-shadcn-ui-cli-v4-2026 · exported 2026-10-11
Canonical as of Oct 7, 2026

shadcn/ui CLI v4: presets, Radix or Base UI, the `cn` package and the unified `radix-ui` import

The `shadcn` CLI is at 4.21.4 (2026-10-07). The current setup is Tailwind v4 + React 19 components without forwardRef, `tw-animate-css`, sonner instead of toast, a single `radix-ui` package or Base UI, and `cn` imported from the `cn` package (since 4.21.0, Sept 2026).

shadcn/ui — current state (CLI v4)

As of: 2026-10

Versions

  • The package is shadcn. The old shadcn-ui package name is not used. Latest: shadcn 4.21.4 (2026-10-07). CLI v4 was announced in March 2026.
  • @shadcn/registry 0.1.x (first released 2026-10-01) is the registry engine behind the CLI. shadcn/registry and shadcn/schema re-export it, so imports do not change.

Changes an older model gets wrong

  1. Tailwind v4 + React 19 is the baseline (Feb–Mar 2025):
    • Components are named functions with data-slot attributes. They no longer use forwardRef.
    • Colors are OKLCH via @theme inline. They are no longer HSL triplets.
    • tailwindcss-animate is deprecated; use tw-animate-css (@import "tw-animate-css";).
    • The toast component is deprecated; use sonner.
    • New projects use the new-york style. The old default style is deprecated.
  2. Unified Radix package (Feb 2026). Components import from radix-ui instead of @radix-ui/react-*:
// before
import * as DialogPrimitive from "@radix-ui/react-dialog"
// after
import { Dialog as DialogPrimitive } from "radix-ui"

Migrate with npx shadcn@latest migrate radix [path], then remove the unused @radix-ui/react-* dependencies. 3. Base UI is a first-class alternative to Radix. Docs shipped Jan 2026 and blocks for both arrived Feb 2026. Choose with init --base radix|base. 4. The cn package (shadcn 4.21.0, 2026-09-04). init installs cn, and lib/utils.ts becomes one line:

export { cn } from "cn"

Registry components now import cn from cn. Existing clsx + tailwind-merge helpers still work. Run npx shadcn@latest migrate cn to switch and remove those two dependencies. 5. CLI v4 commands and flags:

  • init --preset <code> applies a packed design system (colors, theme, icons, fonts, radius).
  • init -t next|vite|… uses templates for Next.js, Vite, TanStack Start, React Router, Astro and Laravel. --monorepo sets up a monorepo.
  • add <c> --dry-run | --diff | --view previews registry changes before writing files.
  • info prints project context, and docs <component> shows component docs.
  • New registry item types: registry:base and registry:font.
  • npx shadcn create (Dec 2025) scaffolds a new project.
  1. Registries:
    • Namespaced registries and an MCP server arrived with CLI 3.0 (Aug 2025).
    • A registry directory/index followed in late 2025.
    • Registries can implement server-side search (Jul 2026).
    • Private GitHub registries authenticate through the GitHub CLI or tokens (Aug 2026).

What to do now

  • Run npx shadcn@latest info before editing an existing project. It shows which base (Radix or Base UI), style, Tailwind version and aliases are in use. Do not assume @radix-ui/react-* imports or a tailwind.config.js.
  • Add components with the CLI. Do not hand-copy old component source, which can bring back forwardRef, HSL variables or tailwindcss-animate.
  • Use --diff to see upstream changes to a component you already installed and may have edited.

Sources