dalao.ai

shadcn/ui

Components you copy into your codebaseOpen source

About shadcn/ui

shadcn/ui isn't a component library installed from npm and imported. It's a way to put component source code straight into a project, plus a CLI and a registry for distributing that code. Buttons, dialogs and tables become the project's own code to change freely. A design engineer who goes by shadcn released it as a personal project in January 2023, joined Vercel that August, and Vercel now backs the project. It's MIT-licensed and free, and in 2026 its focus moved to interfaces for AI agents.

EditorialUpdated 8 min read

The shadcn/ui interface

What problem it solves

Most component libraries work the same way: install a package from npm, import the components, use them. The shadcn/ui docs point out that this holds up until a component has to match a team's design system, or the library lacks a component. Then teams end up wrapping components, writing style overrides, or mixing libraries whose APIs don't fit together.

shadcn/ui hands over the code instead. Each component has three layers. At the bottom is an unstyled primitive (Base UI, React Aria or Radix) that handles keyboard, focus and accessibility. Tailwind does the styling. The top layer, the component itself, sits in the user's repo. The docs sum up the design in five principles: open code, composition, distribution, good defaults, and code that AI models can read and improve.

It's also a distribution system. A flat-file schema describes components, their dependencies and properties, and the shadcn CLI installs them into projects across frameworks. Anyone can publish a registry in that format. Since June 2026, any public GitHub repo can serve as a registry, and in August that extended to private repos. The team says companies asked for it so they could share internal design systems, feature kits and agent rules that shouldn't be public, and the commands are the same either way.

The changelog says shadcn/ui launched in January 2023 on top of Radix. Vercel's own guide describes it as a personal side project. On August 9, 2023, shadcn posted on X that he was joining Vercel as a design engineer. His homepage now reads: design engineer on the AI team at Vercel, creator of shadcn/ui and shadcn/registry, and co-creator of v0 with Jared, Shu and Max. Vercel calls it a Vercel-supported open-source project, and the docs footer says "Built by shadcn at Vercel." When v0, Vercel's AI app builder, writes React code, shadcn/ui is part of its default stack.

The foundations keep shifting. In July 2026, new projects switched their default primitive layer from Radix to Base UI, partly because projects created on shadcn/create were already picking Base UI over Radix two to one. Radix is still fully supported. React Aria arrived as a third option the same month.

This is not a component library. It is how you build your component library.

shadcn/ui documentation

Highlights

Users own the code. Components land in the project as source, so changing behavior means editing code, not fighting a library's overrides. Every component shares one composable interface, so neither the team nor its AI assistant has to learn a new API each time.

Three primitive layers, eight styles. The same component can sit on Base UI, React Aria or Radix, and the components released in October 2026 ship for all three across all eight styles. The CLI also ships a few migration commands: migrate radix consolidates scattered @radix-ui/react-* imports into the unified radix-ui package, migrate rtl adds right-to-left support, and migrate icons switches icon libraries. No command moves an existing project from Radix to Base UI or React Aria.

Registries and presets. Anyone can publish components as a registry, including from a private GitHub repo. CLI v4, released in March 2026, added presets: colors, theme, icon library, fonts and radius packed into one short code. A preset is built and previewed on shadcn/create, then used to start a project with init --preset. v4 also added --dry-run to preview changes. A separate April release added shadcn apply, which applies a preset to an existing project.

Built for agent interfaces. October 2026 brought two new components, Trace and Code Block, and 21 AI Elements patterns covering chat and prompt input through reasoning, tool calls, plans and subagents. Each pattern shows how to render AI SDK message parts. There's no package to install; the code is copied in. AI Elements replaces AI SDK Elements, which will be deprecated. Components already installed from AI SDK Elements were copied into the project, so they keep working and there's no rush to migrate.

Parts for agent interactions. The pieces arrived before AI Elements did. June 2026 brought a set of chat interface components. August brought Questionnaire, a multi-step question flow the team pitches for agents that need the user to clarify before carrying on, as well as onboarding, surveys and configuration forms. It also ships for all three primitive layers and eight styles, with an unstyled version in @shadcn/react. That same month, @shadcn/helpers learned to mock human-in-the-loop flows: a scripted AI SDK conversation can pause for real user input or an approval, then continue based on what the user decided.

Ways in for AI tools. An official MCP server lets assistants browse, search and install registry components. llms.txt indexes the whole documentation, and Skills give coding agents like Claude Code working knowledge of the components and the registry.

How it compares

The docs compare shadcn/ui with the install-and-import model: packaged libraries are easier to upgrade but harder to bend, while shadcn/ui is easy to bend but leaves maintenance to the user. MUI, Chakra UI, Mantine, Radix Themes and HeroUI are the libraries it most often gets weighed against. Each description comes from that project's own site.

Material UI (MUI) describes itself as an open-source React library implementing Google's Material Design, comprehensive and production-ready out of the box, with design kits and templates on offer. It is aimed at products that already follow Material Design, or teams that want back-end engineers and non-specialist designers to assemble a consistent UI quickly.

Chakra UI calls itself an accessible React component system for web apps and design systems. It works with Next.js server components and uses semantic tokens to keep colors, type and other design decisions in one place. It delivers a themed component set as a package rather than as code in the user's repo.

Mantine advertises more than 120 customizable components and 70 hooks, and it also ships an llms.txt and an MCP server for AI tools. It is aimed at teams that need a large catalog of ready-made components and utility hooks, don't use Tailwind, and want fixes to arrive through upgrades.

Radix Themes is the pre-styled library from the Radix team, built to work with minimal setup; the unstyled layer is Radix Primitives. It is aimed at teams that want Radix's interaction and accessibility quality with styling and upgrades that come from a package, without maintaining component code themselves.

HeroUI (formerly NextUI) targets React on the web and React Native. Its web library pairs React Aria Components with Tailwind CSS v4. It is aimed at teams on Tailwind that would rather receive fixes through package upgrades, or that need to cover mobile with React Native too.

Who uses it

Public numbers, all as of 2026-10-25: about 126,000 GitHub stars and 13,000 forks; 8,003,630 npm downloads of the shadcn CLI in the week of October 16–22; and, per the author's homepage, about 45 million components a month served by the official registry, not counting third-party registries. Vercel's guide says it's one of the first things many React teams reach for, especially teams leaning on AI coding tools.

Who it's for

React and Tailwind teams that want a design system they actually own. The component code sits in the team's repo, so changing the design means editing code. It also suits projects where AI coding tools will read and edit the UI: the components are plain source files, and there's an official MCP server, an llms.txt and agent Skills. The AI Elements patterns released in October 2026 are aimed at teams building chat or agent products.

Not for

Projects that don't use Tailwind. Teams that want every fix to arrive with a version bump and would rather not maintain component code. And teams that need an established design language such as Material Design, with a full set of ready-made components and templates.

Getting started

For a new project, shadcn/create offers a visual choice of primitive layer, style, colors and fonts, then produces a preset code and the init command for the chosen framework. npx shadcn@latest init -t next also works directly; templates include next, vite, start, react-router and astro. --base aria starts the project on React Aria.

In an existing project, npx shadcn@latest init installs dependencies and writes components.json and the global CSS. Components are then added as needed, for example npx shadcn@latest add button. --dry-run previews what would change, and --diff compares a file with the registry version.

Someone else's design is applied with npx shadcn@latest apply <preset-code>, and shadcn build generates the registry files for publishing one's own components. As of 2026-10-25 the latest release is shadcn@4.22.1, published on GitHub at 02:11 (UTC+8) on October 19, 2026.

Pricing & license

Free, under the MIT license, with no paid tier. Vercel's guide spells it out: personal and commercial use are both fine as long as source copies keep the copyright notice. Nothing shows up in the rendered UI, and there are no usage caps once the components are in a repo.

Risks & limits

Copied code doesn't update itself. When upstream fixes something, merging it is up to the user. The docs' answer is that the unstyled primitives still get fixes through normal dependency updates and only the top layer belongs to the user. The CLI's --diff shows what changed, but the merge is still manual.

The project moves fast. May 2026 added shadcn eject, which inlines the shared shadcn/tailwind.css and drops the shadcn package dependency. July made Base UI the default for new projects. September turned the cn helper every project used to copy into a standalone cn package, with a migrate cn command. October announced the deprecation of AI SDK Elements. There are also a lot of choices: three primitive layers and eight styles.

Our verdict

For React and Tailwind teams that want components they fully control and AI tools can edit directly, the cost to weigh is maintenance, not money. For teams that would rather get every fix with a version bump, or whose product follows Material Design, a packaged library like MUI or Radix Themes carries less maintenance.

Why it stands out

shadcn/ui changed how front-end components are distributed. Instead of installing a library, you copy accessible, well-styled components into your own codebase and own them. It sounds like a regression and turned out to be exactly what people wanted.

Built on Tailwind, with a choice of Radix, Base UI or React Aria primitives, by a designer-engineer known only as shadcn, it became the default starting point for a large share of new React applications and the reference for a whole aesthetic.

You copy its accessible components into your own codebase and own them, instead of installing a library.

Sources

Official

  1. Introduction - shadcn/uiui.shadcn.com · Accessed Oct 25, 2026
  2. Installation - shadcn/uiui.shadcn.com · Accessed Oct 25, 2026
  3. shadcn - shadcn/uiui.shadcn.com · Accessed Oct 25, 2026
  4. Changelog - shadcn/uiui.shadcn.com · Accessed Oct 25, 2026
  5. July 2026 - Base UI as the Default - shadcn/uiui.shadcn.com · Accessed Oct 25, 2026
  6. July 2026 - React Aria - shadcn/uiui.shadcn.com · Accessed Oct 25, 2026
  7. March 2026 - shadcn/cli v4 - shadcn/uiui.shadcn.com · Accessed Oct 25, 2026
  8. September 2026 - cn - shadcn/uiui.shadcn.com · Accessed Oct 25, 2026

Updates & reading