CVA Component Variants

Model type-safe component variants with class-variance-authority (CVA). Defines variant, size, and state class maps with compound variants and defaults, then merges them cleanly with tailwind-merge for reusable design-system components.

This skill helps you build variant-driven UI with CVA. It declares base classes plus variant/size/state axes, adds compound variants for combined states, sets sensible defaults, infers prop types with VariantProps, and combines cva with clsx and tailwind-merge to resolve conflicting utility classes — the pattern behind shadcn/ui and modern Tailwind design systems.

When to use

Use when building reusable, typed UI primitives with Tailwind — buttons, badges, and inputs with variant/size/state props — or when standardizing how a design system expresses component styles.

Examples

Typed Button variants

Variant, size, and defaults

Create a Button component with class-variance-authority exposing variant (primary/secondary/ghost) and size props, typed with VariantProps and merged with tailwind-merge

Compound variants

Style combined states

Add a compound variant to a CVA Badge so the destructive variant at large size gets extra emphasis classes