Skip to main content
VibeStacks

Loading the search index…

EntryTop pick

shadcn/ui

Not a component library but component source you copy into your repository. Accessibility comes from proven primitives; the look is yours to change with Tailwind.

Last reviewed
Applies to
shadcn CLI 4.22 · Tailwind CSS 4.3
Website
ui.shadcn.com

Good for

  • React projects that need forms, dialogs, menus, tables, and other functional components
  • Letting the AI read and change component source directly instead of fighting a black-box library API
  • Projects styled with Tailwind

Not for

  • Projects that do not use React or Tailwind
  • Teams that want upgrades to arrive automatically (the source is yours, so you merge upstream changes yourself)

shadcn/ui works the opposite way from a traditional component library: instead of installing a package, you use a CLI to copy the component source into your project. From then on the code is yours to change.

Why it is our top pick

  • The AI sees all the code. Components live in src/components/ui/, so when the AI changes styles or behavior it reads the source instead of guessing a library's API.
  • Accessibility is handled. It builds on mature unstyled primitives with keyboard interaction, focus management, and ARIA already done, which is exactly what AI gets wrong when writing components itself.
  • Full control of the look. Styles are Tailwind classes and CSS variables, so theming means changing variables; CSS variables from the Style Museum plug right in.
  • A large ecosystem. AI knows it very well, and almost every common need has a ready-made component.

Getting started

pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest add button dialog form

init asks for a base color and path aliases and writes them to components.json; every later add uses those settings.

Trade-offs to know

Because the source lives in your repository, upstream fixes do not arrive automatically. Our advice: avoid heavy edits to the base components in ui/, and wrap business-specific customization around them, so you can re-pull them with the CLI when needed.

Souvenir

Take it home to your AI

Drop this AGENTS.md into your project, or paste it straight to your AI coding assistant.

AGENTS.md
# AGENTS.md (UI components section)

## Where components come from
- Add interactive components (buttons, forms, dialogs, menus, tabs, tooltips, etc.) with shadcn/ui:
  `pnpm dlx shadcn@latest add <component>`. Do not hand-write them.
- Check `src/components/ui/` first in case it already exists.

## Changing components
- Avoid heavy edits to base components in `src/components/ui/`; wrap business-specific customization in `src/components/`.
- Change colors, radii, and fonts through CSS variables only; never hard-code colors in components.

## Accessibility
- Icon-only buttons must have an `aria-label`.
- Every form field needs an associated label and error message.
- Never remove focus styles.

Related

  • Article

    Functional and display components

    Functional components answer "does it work?" (forms, dialogs, menus); display components answer "does it look good?" (3D, motion, visual style). You choose them in completely different ways.

  • EntryTop pick

    Vite + React

    The most versatile frontend starting point. Vite runs the dev server and build, React handles the UI, and AI knows this pair best.

  • EntryTop pick

    Motion

    The most used animation library in React. Write enter, exit, layout, and gesture animations as declarative props.