shadcn/ui

shadcn/ui is not a dependency, it is a code distribution platform. The CLI writes component source files directly into your project, so you read, edit and version them like your own code.

At a glance

Install	npx shadcn@latest init
Package	none, source is copied in
Styling	Tailwind CSS
Primitives	Base UI by default, Radix still supported
Frameworks	Next.js, Vite, Remix, Astro, TanStack Start
MCP server	yes, registry-aware
License	MIT

Install

npx shadcn@latest init
npx shadcn@latest add button dialog

What the code looks like

The component lands in your own tree, so this import points at your file, not at node_modules.

import { Button } from "@/components/ui/button"

export function SaveBar() {
  return <Button variant="outline" size="sm">Save changes</Button>
}

The registry is the real feature

Registries are declared in components.json and serve components as JSON:

{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}

Teams use this to distribute an internal design system with the same workflow. The MCP server reads those registries, so an assistant can be told to build a page from your own catalogue rather than from generic components.

Choose it if

• You want to own and edit every line rather than fight a library's abstraction.
• You are starting a React project in 2026 and want the path of least resistance.
• You want your design system distributable by CLI to other teams.

Look elsewhere if

• You want automatic upgrades. There is no package to bump, so fixes are manual.
• Your team is uncomfortable owning component source and its maintenance.

Setup checklist

• Tailwind CSS configured
• components.json generated by init
• Path alias @/components resolving
• MCP server wired into your editor if you code with an assistant