shadcn-ui
Master shadcn-ui's approach to building reusable components with CVA for variant management, Radix for accessible primitives, and Tailwind for styling. Covers CLI setup, the cn() utility, polymorphic rendering via asChild, compound component structure, and modern CSS selectors like has() for conditional layouts.
shadcn-ui teaches component patterns using CVA variants, Radix primitives, and Tailwind CSS for building reusable styled UI components.
AI-generated summary based on this skill's SKILL.md
Install
existential-birds/beagle/shadcn-ui · repository language: TypeScript
git clone https://github.com/existential-birds/beagle
cp -r beagle/plugins/beagle-react/skills/shadcn-ui ~/.claude/skills/shadcn-uinpx skillfed install existential-birds/beagle/shadcn-uiFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is shadcn-ui and how does it differ from a component library?
shadcn-ui is a collection of reusable React components built on Radix UI primitives and styled with Tailwind CSS. Unlike traditional npm packages, shadcn-ui uses a CLI to copy component source code directly into your project, giving you full ownership and control. This approach lets you customize components without fighting library abstractions, combine CVA for variant management with Tailwind styling, and maintain a consistent design system across your application.
How do you set up shadcn-ui in a React project with CLI initialization?
shadcn-ui setup begins with `npx shadcn-ui@latest init`, which configures your project's Tailwind CSS and TypeScript settings. The CLI prompts you to choose your preferred style (default or New York), color scheme, and CSS variables. Once initialized, you can add individual components using `shadcn add button`, `shadcn add dialog`, and similar commands. This modular approach means you only pull in the components you actually use, keeping your bundle lean.
How to use CVA (Class Variance Authority) for component variants?
shadcn-ui leverages CVA to define component variants declaratively. You create a `cva()` function that maps variant props (like `size`, `variant`, `disabled`) to Tailwind classes. For example, a button might have `size: { sm: 'h-8', lg: 'h-10' }` and `variant: { primary: 'bg-blue-600', destructive: 'bg-red-600' }`. The `VariantProps` type extracts TypeScript types from your CVA definition, ensuring type-safe variant usage. This pattern scales across all shadcn-ui components.
What does the cn() utility function do in shadcn-ui?
shadcn-ui's `cn()` utility merges Tailwind classes intelligently using clsx and tailwind-merge. It resolves class conflicts (e.g., `cn('p-2 p-4')` returns `p-4`) and handles conditional classes cleanly. This prevents Tailwind specificity issues when combining base styles with variant or override classes. You'll see `cn()` throughout shadcn-ui components to compose dynamic class strings safely.
What is the asChild pattern and how does polymorphic rendering work?
shadcn-ui's `asChild` pattern, powered by Radix UI's Slot component, enables polymorphic rendering. Instead of rendering a fixed element, components accept an `asChild` prop that merges their behavior onto a child element. For example, `<Button asChild><a href="/">Home</a></Button>` renders an anchor tag with button styling and accessibility. This pattern decouples component logic from DOM structure, letting you compose components flexibly without wrapper divs.
How does shadcn-ui use data-slot attributes and modern CSS selectors for styling?
shadcn-ui employs `data-slot` attributes to target nested elements with CSS selectors like `has()`. For instance, a form component might use `data-slot="input"` on inputs, then style them conditionally with `[data-slot="input"]:focus-visible` or `has([data-slot="input"]:disabled)`. This approach keeps styles scoped and maintainable, avoiding deep class hierarchies. Combined with Tailwind's arbitrary selectors, it enables sophisticated conditional layouts and state-driven styling.
SKILL.md
rendered from the published skill — quoted content, verbatim
shadcn/ui Component Development
Contents
- CLI Commands - Installing and adding components
- Quick Reference - cn(), basic CVA pattern
- Component Anatomy - Props typing, asChild, data-slot
- Component Patterns - Compound components
- Styling Techniques - CVA variants, modern CSS selectors, accessibility states
- Decision Tables - When to use CVA, compound components, asChild, Context
- Common Patterns - Form elements, dialogs, sidebars
- Reference Files - Full implementations and advanced patterns
CLI Commands
Initialize shadcn/ui
npx shadcn@latest init
This creates a components.json configuration file and sets up:
- Tailwind CSS configuration
- CSS variables for
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
plugins/beagle-react/skills/shadcn-ui/SKILL.md
plugins/beagle-react/skills/shadcn-ui/references/components.md
plugins/beagle-react/skills/shadcn-ui/references/cva.md
plugins/beagle-react/skills/shadcn-ui/references/patterns.md