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

shadcn-core-stack

Diagnose shadcn-ui component bugs in className overrides, cva variants, and Radix imports.

Updated May 19, 2026
Search Tags:#debugging#shadcn ui#tailwind v4#tailwind-merge#cva variants#cn helper#radix primitives
One-click install
npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-core-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-core-stack
Source: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/tree/main/skills/source/shadcn-core/shadcn-core-stack
Command: npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-core-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents the most common shadcn-ui failures where class merging, variant wiring, or package/runtime assumptions cause UI styling and behavior to break silently.

Core Features & Use Cases

  • Runtime stack clarity: explains how Radix primitives, cva variants, tailwind-merge, clsx, and lucide-react combine after shadcn copies code into your project.
  • Deterministic class composition: enforces using the canonical cn() helper so callers can override styles while tailwind utility conflicts resolve correctly.
  • Variant correctness: ensures cva is defined at module scope and that compoundVariants and defaultVariants behave as intended.
  • Radix import hygiene: helps choose unified radix-ui vs legacy @radix-ui/react-* and avoids mixing module instances.
  • Version alignment guidance: covers tailwind-merge compatibility across Tailwind v3 vs v4, and cva stable vs beta selection.

Quick Start

Ask an AI to “Explain what runtime layers my shadcn component is using and show how to fix my className override not applying, including correct cn(), cva, and Radix import choices for Tailwind v4.”

Frequently Asked Questions about shadcn-core-stack

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

FAQPage Schema
Why is my shadcn-ui className override not applying correctly?▼

Your shadcn-ui className override fails when the cn() helper is misconfigured, preventing tailwind-merge from resolving utility conflicts and allowing later classes to properly override earlier ones.

How does the shadcn-ui styling stack combine Radix, cva, and tailwind-merge?▼

The shadcn-ui styling stack combines Radix primitives for accessible behavior, cva for variant definitions, and tailwind-merge with clsx inside the cn() helper to deterministically resolve class conflicts after CLI code copying.

Does tailwind-merge work with Tailwind v4 for shadcn components?▼

Tailwind-merge compatibility with Tailwind v4 requires specific version alignment guidance to ensure utility classes resolve correctly within shadcn components, avoiding silent styling breaks during conflicts.

How do I fix cva variant bugs in shadcn-ui components?▼

Fix shadcn-ui cva variant bugs by defining cva at module scope, ensuring VariantProps inference is correct, and verifying that compoundVariants and defaultVariants behave as intended without being overwritten by tailwind-merge.

Should I use the unified radix-ui package or legacy @radix-ui/react-* imports?▼

Choosing between unified radix-ui and legacy @radix-ui/react-* imports requires import hygiene to avoid mixing module instances, which can cause unpredictable component state and break shadcn component behavior.

What is the best way to debug shadcn styling conflicts from tailwind utility overrides?▼

Debug shadcn styling conflicts by enforcing canonical cn() usage with correct twMerge and clsx semantics, ensuring callers can safely override styles while tailwind utility conflicts resolve deterministically without breaking variants.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
Impertio-StudioImpertio-Studio

shadcn-syntax-variant-cva

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

Official
Advanced
JordiNodeJSJordiNodeJS

component-development

Create accessible React 19 UI components with Shadcn UI and Tailwind CSS 4.

Community
Intermediate
acquiaacquia
16

canvas-styling-conventions

Enforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.

Official
Intermediate