shadcn-ui

Run npx shadcn@latest init to create the components.json configuration, then add components with npx shadcn@latest add followed by the component name. The CLI downloads the source into components/ui/ and installs required dependencies automatically.

Edit the HSL CSS variables in globals.css, such as --primary and --background, to match your brand colors. Dark mode overrides go in the .dark selector, and component-level variants use class-variance-authority in the component file.

shadcn/ui works with Vite, Next.js, and other React frameworks. For Vite, configure the @ path alias in vite.config.ts and set rsc to false in components.json since server components are Next.js-specific.

shadcn/ui copies component source into your project for full ownership and customization, while MUI is a versioned npm dependency. Choose shadcn/ui when you want Tailwind-based styling and no version lock-in; the migration guide maps MUI components to shadcn equivalents.

Styles fail when globals.css is not imported in the root layout, Tailwind content paths exclude your files, or CSS variables are undefined. Verify tailwind.config.js content paths and that @tailwind directives exist in your global stylesheet.

You can since the code lives in your project, but the recommended practice is creating wrapper components outside components/ui/ instead. This keeps base components pristine so CLI updates and diffs remain manageable.