shadcn-ui

Run npx shadcn@latest init to create components.json and set up Tailwind, then use npx shadcn@latest add button to install individual components. The old shadcn-ui package name is deprecated; use shadcn instead.

Define variants with cva() by specifying base classes, variant dimensions like variant and size, and defaultVariants. Extract types with VariantProps<typeof variants> and merge user classes through the cn() utility.

The asChild prop uses Radix UI's Slot component to render the component as its child element instead of the default tag. This lets a Button render as an anchor or Next.js Link while keeping button styling and behavior.

Use compound components when UI has multiple semantic parts, optional sections, or parts needing independent styling, like Card with CardHeader and CardFooter. Use a single component for simple wrappers that only render children.

Every component includes a data-slot attribute enabling CSS and Tailwind targeting, such as [&_[data-slot=button]]:shadow-lg. Combined with has() selectors, parents can adjust layouts when specific child slots are present.

The :has() selector works in Chrome 105+, Safari 15.4+, and Firefox 121+. For older browsers, provide fallback base classes alongside the has() conditional classes so layouts degrade gracefully.