{"enrichment":{"faq":[{"a":"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.","q":"What is shadcn-ui and how does it differ from a component library?"},{"a":"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.","q":"How do you set up shadcn-ui in a React project with CLI initialization?"},{"a":"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.","q":"How to use CVA (Class Variance Authority) for component variants?"},{"a":"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.","q":"What does the cn() utility function do in shadcn-ui?"},{"a":"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.","q":"What is the asChild pattern and how does polymorphic rendering work?"},{"a":"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.","q":"How does shadcn-ui use data-slot attributes and modern CSS selectors for styling?"}],"shadow_tags":["component-library","tailwind-utilities","radix-primitives","variant-system","polymorphic-rendering","accessibility-patterns","css-selectors","semantic-tokens","cli-tooling"],"summary_rewrite":"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."},"files":[{"bytes":13123,"path":"plugins/beagle-react/skills/shadcn-ui/SKILL.md","sha256":"6b31abc99f3fbbda0dd6ed86f2cf80bfad05a890dd70498355d565d5073f484f","url":"https://skillfed.io/files/existential-birds/beagle/shadcn-ui/67c3ee34/SKILL.md"}],"id":"existential-birds/beagle/shadcn-ui","links":{"html":"https://skillfed.io/existential-birds/beagle/shadcn-ui","md":"https://skillfed.io/existential-birds/beagle/shadcn-ui.md","repo":"https://github.com/existential-birds/beagle"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"TypeScript","last_updated":"2026-07-21","license":"Apache-2.0","name":"shadcn-ui","publisher":"existential-birds","stars":74},"relations":{"similar":[{"id":"mattbx/shadcn-skills/shadcn-component-review"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components"},{"id":"ScientiaCapital/skills/frontend-ui-skill"},{"id":"pixel-point/animate-text/tailwind-design-system"},{"id":"calesthio/OpenMontage/tailwind-design-system"},{"id":"existential-birds/beagle/shadcn-code-review"},{"id":"bobmatnyc/claude-mpm-skills/shadcn"},{"id":"yonatangross/orchestkit/ui-components"},{"id":"pedronauck/skills/shadcn"},{"id":"shep-ai/shep/shadcn-ui"}]},"slug":{"owner":"existential-birds","repo":"beagle","skill":"shadcn-ui"},"version":"67c3ee34"}