shadcn-ui

Run npx shadcn@latest init in your project to create components.json, configure Tailwind, and set up CSS variables. Then add components with npx shadcn@latest add followed by the component name, such as button or card.

Edit the HSL CSS variables in globals.css, such as --primary and --background, to change the theme globally. For component-level changes, add variants using class-variance-authority 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 to toggle between light and dark themes.

Yes, migrate incrementally by installing shadcn/ui alongside your existing library and replacing components page by page. The migration guide provides component mapping tables for Material-UI, Chakra UI, Ant Design, and Bootstrap.

Styles fail when globals.css is not imported in the root layout, Tailwind content paths exclude your files, or CSS variables are undefined. Also verify that tailwindcss-animate is installed and path aliases are configured in tsconfig.json.

Both are unstyled, accessible primitive libraries that shadcn/ui components build upon, sharing the same component API. You choose one during project creation, and the shadcn CLI installs the correct dependencies automatically.