shadcn-syntax-variant-cva

What problem does it solve?

This Skill prevents shadcn ui styling bugs caused by incorrect use of class-variance-authority (cva) and its required integration patterns, especially when variant classes don’t apply as expected or when caller className overrides fail.

Core Features & Use Cases

• Correct cva variant construction: Ensures variants, compoundVariants, and defaultVariants are defined using the canonical cva(base, config) structure so the right classes are produced for each prop combination.
• Reliable className merging with cn(): Enforces the rule that every cva output must be wrapped in cn() (clsx + tailwind-merge) so Tailwind conflicts resolve deterministically and caller overrides reliably win.
• Type-safe variant props with VariantProps: Guides using VariantProps<typeof yourVariants> to keep the component’s variant API accurate and extensible without duplicating string unions.
• Radix Slot (asChild) integration: Covers the polymorphic rendering pattern so Button-like components can render a single child element (e.g., Link) while preserving styling and avoiding runtime Slot errors.

Quick Start

Ask the AI to “update my shadcn component’s cva variants and ensure className overrides work correctly using cn() and VariantProps, including any asChild/Slot considerations,” and provide the current variants, component code, Tailwind version (v3 or v4), and the symptom you’re seeing.