shadcn/ui

What it is

shadcn/ui is a collection of ready-made interface pieces for React apps: buttons, forms, dialogs, dropdown menus, tables, sidebars, date pickers, charts and more. They're styled with Tailwind CSS and built on top of libraries that handle the hard parts, like keyboard use and screen readers.

The twist is how you get them. A normal component library is a package you install and never touch. With shadcn/ui, a command copies each component's source code into your project. From then on it's your code. You or your agent can change anything, and nothing breaks when the library updates, because there's nothing to update automatically.

It's free, MIT-licensed, and made by shadcn, who works at Vercel. Since March 2026 its command-line tool has been explicitly built for coding agents as well as people.

Why it matters if you build with agents

• Agents already know it. It's so widely used that models have seen a lot of it. One HN user said every LLM defaults to it when building a UI.
• There's an official skill. npx skills add shadcn/ui installs a skill that switches on when your project has shadcn set up. It reads your setup, then teaches the agent the right commands, theming rules and composition patterns, like which form pieces to use together.
• The CLI gives agents current docs. shadcn docs button returns the current docs and examples, and shadcn info describes your project. That helps an agent avoid writing last year's version of a component.
• Previews before changes. --dry-run and --diff show what a command would change before anything is written, and the release notes suggest piping that to your agent to review.
• An MCP server, if you want it. The MCP server lets an agent browse, search and install components from shadcn and third-party collections (called registries) in plain English.
• Ready-made AI app parts. Recent releases added chat bubbles, message lists and a set of AI Elements for showing an agent's reasoning, tool calls and plans.

What actually happens when you use it

1. Set up. npx shadcn@latest init adds a components.json settings file, your theme colours and a few helpers. You choose between two underlying libraries, Base UI (the default since July 2026) or Radix.
2. Add pieces. npx shadcn@latest add dialog copies the dialog's code into components/ui. Your agent usually does this for you.
3. Customise. Edit the files directly, or change the whole look at once with a preset: a short code covering colours, fonts, corner rounding, icons and one of several visual styles.
4. Pull from other registries. Anyone can publish components in the same format, including from a GitHub repo, and the CLI installs them the same way.

What people like

• You own the code. Supporters on HN say copying components in gives you a full library you can still modify.
• No dependency traps. One developer described having to migrate their whole app to a new version of their packaged UI library before they could upgrade React. With shadcn's copied code, they said, you'll almost never see that happen.
• Gradual migrations. When shadcn switched its default to Base UI, existing Radix projects didn't need to migrate. You can move one component at a time, and both stay supported.
• Bugs get fixed fast. When a January registry mistake broke installing the combobox for everyone, shadcn himself replied "On it" and had it fixed within two days.

What people run into

• Every AI-built app looks the same. This is the big one. A May HN commenter stopped using it because it makes their app look LLM-generated. Another said most projects never deviate from the defaults. Even shadcn agrees. Launching shadcn create, he wrote: "all apps started looking the same. I guess the defaults were a little too good." One builder rebuilt their whole front end because the shadcn version looked very generic.
• Updating is on you. Because the code is copied in, you don't get fixes by bumping a version. A sceptic on HN said you now need an AI agent for an upgrade that should be a version number. Another pointed out that new components you add won't know about your customisations.
• Constant change underneath. In the last year: a new CLI, several new visual styles, a switch of default library from Radix to Base UI, and a new cn helper package. Each is optional, but it means the code your agent remembers may not match your project.
• The docs and the CLI can disagree. A long-running issue reports components installed by the CLI differing from the docs, depending on your Tailwind version and chosen style. That confuses people and agents alike.
• The issue tracker is crowded. There are around 800 open issues. Many of the most discussed recent ones are install errors tied to a specific setup.

Before you install

• Pick a look first. Spend ten minutes at ui.shadcn.com/create choosing a style, colours and fonts, then start from that preset. The styles change spacing and shapes, not just colours, which goes a long way against the default look.
• Tell your agent about it. Install the skill so the agent follows your setup instead of its memory of older versions.
• Commit before big changes. shadcn apply reinstalls your components with the new preset, which can wipe your edits. Use --only theme to change just colours, and preview updates with --diff.
• Third-party registries are someone else's code. Installing from a registry copies their files straight into your app. Use ones you trust, and look at what's added.
• It's React only. The official project targets React frameworks. Ports for other stacks exist, but they're separate community projects.

The short version

shadcn/ui is close to the standard way to build a React interface with an agent: agents write it fluently, the CLI and skill are designed for them, and you own every line. The two real costs are sameness and maintenance. Choose your own preset on day one so your app doesn't look like everyone else's, and accept that updating copied code is a job you, or your agent, have to do on purpose.