Claude Code Prompts for shadcn/ui

Copy-paste Claude Code prompts for shadcn/ui — installing components, customizing without losing upgrade path, theme overrides, and Radix accessibility checks.

shadcn/ui isn't a library — the components are pasted into your repo. That makes them yours to edit, but also means custom changes block clean upgrades. The prompts below keep shadcn vendored and unmodified while still letting you build branded components on top.

Prompt 1 — Add a new shadcn primitive

I need a Combobox. Walk me through adding it via shadcn CLI.

1. Run: npx shadcn@latest add combobox
2. Verify it landed in src/components/ui/ — list what files it touched.
3. Check if it required new packages — if so, what?
4. Check the existing tailwind.config / @theme — does it use any tokens that
   aren't in our system? If so, list the gaps.
5. Add ONE example usage at src/components/examples/ComboboxDemo.tsx — read
   one of the other examples in that folder as the template.

Do NOT modify the generated src/components/ui/combobox.tsx — it stays
exactly as shadcn shipped it. Wrappers come next.

Prompt 2 — Branded wrapper that preserves upgradability

Build a branded Button used across the app at src/components/branded/
BrandedButton.tsx that:
- Wraps the shadcn Button from src/components/ui/button.tsx — does NOT modify it.
- Adds variants 'primary' | 'ghost-brand' | 'danger-soft' that map to specific
  Tailwind classes using our design tokens (see app.css @theme).
- Forwards all other Button props via Pick + ComponentProps.
- Forwards ref via React.forwardRef.

Constraints:
- The base shadcn Button file MUST be untouched — if we re-run npx
  shadcn@latest add button, our wrapper still works.
- Use the cn() helper from src/lib/utils.ts to merge classes.
- Add 3 stories in src/components/branded/BrandedButton.stories.tsx
  (Storybook 8).
- Update every existing usage of  across
  src/features/** to use  — list the file
  paths affected as a top-of-diff comment so I can review.

Prompt 3 — Accessibility audit on Radix-backed components

Run an a11y audit on the dialog/dropdown-menu/popover usages in src/features/.

For each usage:
- Does the trigger have an accessible name (aria-label or visible text)?
- Does the Dialog have a  (Radix prints a console warning if missing)?
- Are interactive children using Radix's *.Item / *.Trigger, not raw ?
- For dropdowns: is there a logical keyboard order?

Output as a table:
| file | component | issue | severity (1-3) | fix |

Do NOT auto-fix. I'll triage.

CLAUDE.md for shadcn

## shadcn/ui policy
- src/components/ui/ is vendored from shadcn. NEVER edit those files.
- Customisation via wrapper components in src/components/branded/.
- Theme tokens come from app.css @theme (Tailwind v4).
- Add components via 'npx shadcn@latest add '. Never copy-paste from docs.
- A11y: keep Radix structure intact (Trigger, Content, Item) — those carry
  the keyboard/ARIA behaviour.

Related: Tailwind v4 prompts.

Frequently asked questions

Free tools

More examples