shadcn-ui

Run npx shadcn@latest init in your project to create components.json, then add components with npx shadcn@latest add button. For new projects, npx shadcn@latest create walks you through framework, style, and component library choices interactively.

Edit the HSL CSS variables in globals.css, such as --primary and --background, to change colors globally. For component-level changes, add variants using class-variance-authority in the component file or create wrapper components outside components/ui/.

Yes, shadcn/ui includes dark mode support through a .dark class with its own CSS variable definitions. In Next.js, combine it with next-themes and a ThemeProvider using attribute="class" to toggle between light and dark themes.

Yes, the migration guide maps components from MUI, Chakra UI, Ant Design, and Bootstrap to shadcn/ui equivalents. Incremental migration is recommended: install shadcn/ui alongside the existing library and replace components feature by feature.

Styles fail when globals.css is not imported in the root layout, Tailwind content paths exclude your files, or CSS variables are undefined. Verify tailwindcss-animate is installed and that tsconfig.json includes the @/* path alias.

Both are unstyled, accessible primitive libraries that shadcn/ui components can be built on. You choose one during project creation, and the shadcn add command automatically installs the correct dependencies for your selected library.