shadcn/ui

Not a component library in the traditional sense — a collection of beautifully designed, accessible React components you copy into your own codebase via a CLI. Built on Tailwind CSS for styling and Radix UI for accessible primitives (focus management, ARIA, keyboard nav). Because the code lands in your repo rather than node_modules, you own and freely modify every component — no version-lock, no fighting a library’s API to restyle a button.

Links

Description

• Copy-in, not install — npx shadcn add button writes the component source into your project.
• Tailwind-native — every component is React + Tailwind CSS classes you can edit directly.
• Radix primitives — dialogs, dropdowns, popovers, etc. ship accessible by default.
• Theming via CSS variables — light/dark and brand themes through token variables.
• Registry — a growing catalogue of components and blocks; supports custom/3rd-party registries.
• Framework-agnostic-ish — first-class with Next.js, works across React setups.

Download or use

npx shadcn@latest init        # set up tokens + utils
npx shadcn@latest add button dialog form

• Site/docs: ui.shadcn.com
• Repo: github.com/shadcn-ui/ui

Reasoning for

shadcn/ui is the component layer across Qamera AI, AGRE, Travelcast AI, and the Value Builders MVP track. The “you own the code” model is the whole point: I get a polished, accessible starting point and then bend it to the product instead of wrapping a black-box library. It pairs naturally with the MakerKit SaaS starter (which also leans on shadcn) and with Tailwind CSS underneath.

There’s a second strategic reason I teach it in Value Builders: shadcn is effectively the lingua franca of AI app builders — v0, Cursor, and Lovable all emit shadcn + Tailwind by default. So a component generated by an AI tool drops cleanly into a hand-coded shadcn project and vice-versa, which makes the Builder-track → Tech-track handoff almost seamless.

Alternatives considered

• MUI (Material UI) — batteries-included and themeable, but you’re styling around its opinions; shadcn gives raw ownership.
• Chakra UI — great DX and a11y, but a runtime dependency with its own styling system rather than Tailwind CSS.
• Radix UI (raw) — shadcn uses Radix; using it directly means rebuilding the styled layer shadcn already provides.
• Headless UI — Tailwind’s own unstyled primitives; fewer components and no opinionated, copy-in catalogue.

Resources

• 📘 shadcn/ui docs
• 🧱 Blocks & components
• 🎨 Themes
• 🔗 Radix UI primitives

---

Template: tool