whichdevtool?
Menu
StacksDirectory Pricing changes Glossary
VPS and cloud servers App hosting and PaaS Managed databases Transactional email APIs Email marketing and newsletters Domain registrars CDN, DNS and edge security Monitoring, uptime and error tracking Auth and identity Frontend and full-stack frameworks Backend frameworks UI component libraries AI model APIs File and object storage Payments and billing Background jobs, queues and workflows ORMs and database toolkits

Copy-in React component collection and registry CLI · by shadcn (open-source project)

shadcn/ui

Open-source React components that a CLI copies into your project as source code, styled with Tailwind CSS and built on Radix, Base UI or React Aria primitives.

Visit ui.shadcn.com ↗ Alternatives Open source Open source
shadcn/ui homepage
§1

Overview

shadcn/ui describes itself as "how you build your component library" rather than a component library. Instead of importing from an npm package, you run the shadcn CLI and it writes the component's source files into your project. From then on the code is yours: you change a button by editing the button, not by overriding styles from outside.

Components are styled with Tailwind CSS and theme tokens held in CSS variables. Since February 2025 new projects start on Tailwind v4 and React 19, the old default style is deprecated in favour of new-york, and colors moved from HSL to OKLCH. In December 2025 the npx shadcn create command added a choice of primitive layer: Radix or Base UI, with every component rebuilt for Base UI. The changelog in 2026 shows components available for Base UI, React Aria and Radix across eight styles.

The other half of the project is distribution. A flat-file registry schema and the CLI let you publish your own components, blocks and even agent rules, and install them from public or (since August 2026) private GitHub repositories. The trade-off of the copy-in model is maintenance: fixes to upstream components do not reach your copy until you re-add or merge them yourself.

§2

Pricing and plans

Plan Price What you get
Open source Free All components, blocks, CLI and registry tooling

There is no paid tier. The project is open source; third-party registries and paid block collections built on it are separate products.

Source: ui.shadcn.com/docs · prices as published, excluding tax.

§3

What it does

Copy-in CLI
npx shadcn add writes component source into your project, with its dependencies installed for you.
Choice of primitives
Components can sit on Radix or Base UI, and recent components also ship for React Aria.
Registry format
A registry.json schema lets teams publish and install their own components, blocks and helpers.
Private GitHub registries
Since August 2026 the CLI can install from private repositories using GitHub CLI credentials or a token.
Theming with CSS variables
Themes are CSS variables in OKLCH that Tailwind v4 reads through @theme inline.
MCP server and AI tooling
Docs cover an MCP server and v0 integration so AI tools can read and generate components.
§4

Strengths and limitations

Strengths

  • You own the code, so any change is a direct edit
  • No runtime dependency on a UI package version for the styled layer
  • Large ecosystem of registries and ports to Vue and Svelte
  • Works with several accessible primitive libraries

Limitations

  • Upstream fixes do not reach copied components automatically; you re-add or merge them
  • React only; Vue and Svelte versions are separate community projects
  • Requires Tailwind CSS; new projects assume Tailwind v4 and React 19
  • The toast component was deprecated in favour of sonner, and the default style in favour of new-york, so older guides go stale
§5

Who it suits

Good for

  • Teams building their own design system on Tailwind
  • Next.js and Vite apps that want editable, accessible components
  • Codebases where AI assistants edit UI code

Look elsewhere if

  • Teams that want updates by bumping one package version
  • Projects not using Tailwind CSS
§6

Pricing history

  • shadcn/ui moves to Tailwind v4 and React 19

    Announced 6 February 2025: new projects start on Tailwind v4 and React 19, the default style is deprecated for new-york, toast is deprecated for sonner and colors move to OKLCH. Existing Tailwind v3 projects keep working. Source ↗

§7

Alternatives to shadcn/ui

Tool From Free option Stages
Headless UI Unstyled accessible components for React and Vue
— Open source
Flowbite Tailwind CSS components with vanilla JS, plus paid Pro kit
— Free tier
Radix UI Unstyled accessible React primitives
— Open source
shadcn-svelte Copy-in Svelte component collection and CLI
— Open source
Chakra UI Styled React component library
— Free tier
shadcn-vue Copy-in Vue component collection and CLI
— Open source

All UI component libraries →

§8

Questions

Is shadcn/ui a component library?

Not in the usual sense. Its CLI copies component source into your project, and you maintain that code yourself.

Does shadcn/ui use Radix or Base UI?

Either. Since December 2025 you choose Radix or Base UI when creating a project, and newer components also exist for React Aria.

Does shadcn/ui support Tailwind v4?

Yes. Since February 2025 new projects start on Tailwind v4 and React 19; existing Tailwind v3 projects keep working.

Is shadcn/ui free?

Yes, it is open source with no paid tier.

Sources read for this page