ui-styling

Run npx shadcn@latest init to configure your project, then use npx shadcn@latest add followed by component names like button, card, or dialog. Components are copied into your components/ui directory with full TypeScript support.

Install next-themes, wrap your app in a ThemeProvider with attribute set to class, and define dark theme CSS variables under a .dark selector in globals.css. Components automatically respond to the dark class on the html element.

Yes, shadcn/ui supports Vite, Remix, and Astro in addition to Next.js. The CLI init command detects your framework and configures paths, TypeScript, and Tailwind integration accordingly.

Yes, shadcn/ui components are built on Radix UI primitives which follow WAI-ARIA design patterns. They include keyboard navigation, focus management, focus trapping in dialogs, and screen reader announcements out of the box.

Modify CSS variables in globals.css to change colors and radius globally, edit component source files directly since they live in your codebase, or pass className props to override styles on individual instances.

Tailwind purges unused classes at build time, so dynamically constructed class names get removed. Use complete class strings, add dynamic patterns to the safelist in tailwind.config, or define custom tokens with the @theme directive.