shadcn-ui

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

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 through CSS variables defined under the .dark class in globals.css. Combine it with next-themes and a ThemeProvider using attribute="class" to toggle between light and dark themes.

Styles fail when globals.css is not imported in the root layout, Tailwind content paths exclude component files, or CSS variables are missing. Verify tailwind.config.js includes your source paths and that tailwindcss-animate is installed.

Yes, migrate incrementally by installing shadcn/ui alongside your existing library and replacing components page by page. The migration guide maps MUI and Chakra components to shadcn/ui equivalents and covers theming and form handling differences.

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 add command installs the correct dependencies for your selection.