shadcn/ui Setup Guide for Next.js 14: Components, Patterns, and Dark Mode

shadcn/ui is the component library that actually makes sense. It's not a package you install -- it's a collection of components you copy into your project and own completely. Here's how to set it up, what the patterns look like, and how to build consistent UI fast. What shadcn/ui Is (and Isn't) shadcn/ui is not an npm package. You run a CLI that copies component source code into your project. You own the code. You can modify it. There's no version lock. This is intentional. The components are starting points, not black boxes. It's built on: Radix UI: Accessible headless primitives (menus, dialogs, tooltips) Tailwind CSS: Styling class-variance-authority (cva): Variant management clsx + tailwind-merge: Class name composition Setup # New project npx create-next-app@latest my-app --typescript --tailwind --app cd my-app # Initialize shadcn/ui npx shadcn@latest init The init wizard asks about your color scheme, CSS variables, and component directory. Default choices work for most projects.