shadcn-ui

Run npx shadcn@latest init to generate components.json, then add individual components with npx shadcn@latest add button, dialog, form, and so on. Components are copied into your codebase rather than installed as an npm dependency.

Extend the buttonVariants cva definition in components/ui/button.tsx with new variant entries like glass, gradient, or glow, each defining Tailwind classes for background, border, and shadow. The variants then work through the standard variant prop.

Yes, shadcn/ui uses CSS variables defined in globals.css for theming. Set cssVariables to true in components.json and define HSL values for background, foreground, primary, border, and other tokens to create a custom dark theme.

The cn() utility combines clsx and tailwind-merge to merge conditional class names without Tailwind conflicts. It lets you compose base classes, conditional classes, and external className props safely in any component.

This Skill recommends sonner over the default shadcn toast. Sonner provides toast.success, toast.error, toast.loading, and toast.promise methods with simpler styling through toastOptions on the Toaster component.

Avoid using shadcn/ui components as-is for hero sections or premium visual moments. They are unstyled accessible foundations meant to be customized; spectacle-focused animation libraries should handle high-impact visual sections.