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 source code 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 variants are defined under the .dark class, and border radius is controlled by the --radius variable.

Yes, shadcn/ui supports both Vite and Next.js. For Next.js App Router set rsc to true in components.json, and for Vite configure the @ path alias in vite.config.ts so component imports resolve correctly.

shadcn/ui copies component source code into your project, giving full ownership and customization with Tailwind CSS, while Material-UI is a versioned npm package with a built-in theme system. Choose shadcn/ui when you want to modify component internals without library lock-in.

Styles fail when globals.css is not imported in the app entry point, Tailwind content paths exclude your files, or CSS variables are undefined. Verify tailwind.config.js content paths and confirm the tailwindcss-animate plugin is installed.

Yes, since components live in your codebase you can edit them, but the recommended practice is creating wrapper components outside components/ui/ to preserve upgradability. Use the cn() utility and class-variance-authority variants for safe customization.