skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn-syntax-variant-cva

Correct cva variant misuse in shadcn ui components with cn() and VariantProps.

Updated May 19, 2026
Search Tags:#cva#asChild#clsx#tailwind-merge#radix slot#variant props
One-click install
npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-variant-cva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-syntax-variant-cva
Source: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/tree/main/skills/source/shadcn-syntax/shadcn-syntax-variant-cva
Command: npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-variant-cva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about shadcn-syntax-variant-cva

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why are my shadcn ui cva variant classes not applying correctly?▼

Incorrect cva variant construction often causes shadcn ui styling bugs. You must use the canonical cva(base, config) structure when defining variants, compoundVariants, and defaultVariants to ensure the right classes are generated for each prop combination.

How do I fix className overrides failing to win in Tailwind components?▼

To make className overrides win reliably, wrap every cva output in a cn() utility. This function combines clsx and tailwind-merge to resolve Tailwind utility conflicts deterministically, ensuring caller classes override base variant styles.

How do I export type-safe variant props for custom shadcn components?▼

Use VariantProps<typeof yourVariants> to generate type-safe variant props. This pattern keeps your component's variant API accurate and extensible without requiring you to manually duplicate string unions across your codebase.

How does the asChild prop work with Radix Slot in cva components?▼

The asChild prop uses Radix Slot for polymorphic rendering, allowing Button-like components to render a single child element like a Link. This integration preserves styling and avoids runtime Slot errors by adhering to the single-child Slot contract.

Can I use this to fix both variant styling and asChild Slot errors?▼

Yes, this corrects misuse of cva-based variant APIs so variant styling and caller overrides behave deterministically. It specifically integrates asChild with Radix Slot and ensures cn() wrapping resolves Tailwind utility conflicts.

What are the limitations of using cva with Tailwind utility classes?▼

A key limitation occurs when cva output is not wrapped in cn(). Without clsx and tailwind-merge, Tailwind utility conflicts will not resolve deterministically, causing variant styling bugs and preventing caller className overrides from applying correctly.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio

shadcn-errors-styling-conflicts

Diagnose shadcn className overrides for Tailwind utility conflicts and merge-order errors.

Official
Intermediate
anderskevanderskev
75

shadcn-code-review

Review shadcn/ui React components for CVA patterns, asChild composition, accessibility states, and data-slot usage.

Community
Intermediate
OpenCovenOpenCoven
20

shadcn-ui-and-radix

Develops React UI components with Radix accessibility and Tailwind themes.

Official
Advanced
suwandresuwandre

code-architecture-tailwind-v4-best-practices

Guide Tailwind CSS v4 component development with CSS-first tokens and variant strategies.

Community
Intermediate