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
Decision gist · record as of 2026-07-21
shadcn-ui teaches component patterns using CVA variants, Radix primitives, and Tailwind CSS for building reusable styled UI components. 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.
Use it when
- shadcn-ui setup begins with `npx shadcn-ui@latest init`, which configures your project's Tailwind CSS and TypeScript settings.
- shadcn-ui leverages CVA to define component variants declaratively.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
existential-birds/beagle/shadcn-ui · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build reusable UI components with CVA variants and Tailwind styling”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill audits shadcn/ui and Radix-based React components against best practices for variant-driven styling, accessible state handling, and composable component architecture. It checks CVA pattern separation, asChild slot integration, focus and ARIA attributes, and data-slot targeting across multi-part components.
This skill systematically reviews custom components and layouts to ensure they align with shadcn design patterns, visual style conventions, and modern composition practices. It catches common drift issues like hardcoded colors, inconsistent spacing, missing data-slot attributes, and anti-patterns that generation-time linting misses. Use it after writing or modifying components, or when you need to verify a layout follows shadcn idioms.
Master advanced Tailwind component architecture using class-variance-authority for variant management, compound patterns for complex states, and utility helpers like cn for safe class composition. Learn context-based component systems, data-attribute styling, and polymorphic design patterns used in production design systems.
Master modern frontend architecture for production SaaS applications using Tailwind CSS v4, shadcn/ui components, and either Next.js 15+ or Vite SPAs. This skill covers server-first design patterns, WCAG 2.1 AA accessibility, responsive layouts, and performance optimization for dashboards, data tables, and complex enterprise interfaces.
Tailwind Design System is a framework for constructing scalable design systems using Tailwind CSS v4's CSS-first configuration, semantic tokens, and component architecture. It covers design token hierarchies, dark mode setup with native CSS features, and patterns for building reusable components with variants and accessibility built in.
Create production-ready design systems and component libraries leveraging Tailwind CSS v4's CSS-first configuration, design tokens, and native theming. This skill covers token hierarchy, component architecture with CVA patterns, dark mode setup, and responsive design practices for standardizing UI across projects.
More skills shadcn-ui (Apache-2.0) · ui-components (MIT) · design-to-component-translator (MIT) · Shadcn (unlicensed) · component-library (MIT) · shadcn (MIT) · Shadcn (unlicensed) · shadcn (MIT)