React

UI Libraries Commands

Build beautiful React UIs with shadcn/ui components and Tailwind CSS. Learn to install, customize, and compose accessible UI components with utility-first styling.

4 commands

Pro Tips

Use 'npx shadcn@latest add button' to add individual components — they're copied into your project, fully customizable.

Initialize shadcn/ui with 'npx shadcn@latest init' — configures Tailwind, paths, and component style.

Run 'npx shadcn@latest diff' to see what's changed in upstream components since you installed them.

Common Mistakes

shadcn/ui components are copied into your project. You own them — upstream updates require manual merging.

Tailwind CSS purges unused classes in production. Dynamic class names like `bg-${color}-500` won't work — use complete strings.

Commands

Initialize shadcn/ui

$ npx shadcn@latest init

Set up shadcn/ui in your project.

Add shadcn component

$ npx shadcn@latest add button

Add a specific shadcn/ui component.

Add all shadcn components

$ npx shadcn@latest add --all

Add all available shadcn/ui components.

Install Tailwind

$ npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

Install and initialize Tailwind CSS.