shadcn-ui

Create shadcn/ui components with Radix UI and Tailwind CSS.

20|4|Updated Nov 9, 2025

Search Tags:#frontend #react #tailwind css #component development #ui library #radix ui #cva

One-click install

npx skills add https://github.com/anderskev/amelia --skill shadcn-ui-anderskev

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: shadcn-ui
Source: https://github.com/anderskev/amelia/tree/main/.claude/skills/amelia/shadcn-ui
Command: npx skills add https://github.com/anderskev/amelia --skill shadcn-ui-anderskev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developing consistent, accessible, and highly customizable UI components from scratch is time-consuming. shadcn/ui provides a robust foundation built on Radix UI and Tailwind CSS, accelerating UI development.

Core Features & Use Cases

Composable UI Library: Access a collection of pre-built, unstyled Radix UI primitives with Tailwind CSS for rapid UI assembly.
Variant-Based Styling (CVA): Define component variations (e.g., primary, secondary buttons; small, large sizes) using class-variance-authority for consistent theming.
Polymorphic Components (asChild): Render components as different HTML elements (e.g., a Button as an <a> tag) while retaining styling and accessibility.
Use Case: Quickly prototype and build a modern web application's frontend, ensuring design consistency and accessibility across all interactive elements like forms, dialogs, and navigation.

Quick Start

Explain how to use the cn() utility and a basic CVA pattern to create a button component with default and outline variants.