skills.rest
gwenwindflower
gwenwindflowerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn-ui

Automate adding and configuring shadcn/ui components in frontend projects.

9|Updated Feb 15, 2026
Search Tags:#frontend#tailwind#shadcn-ui#ui-components#variants#radix-ui#component-library
One-click install
npx skills add https://github.com/gwenwindflower/dotfiles --skill shadcn-ui-gwenwindflower
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui
Source: https://github.com/gwenwindflower/dotfiles/tree/main/dot_agents/exact_skills/shadcn-ui
Command: npx skills add https://github.com/gwenwindflower/dotfiles --skill shadcn-ui-gwenwindflower

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Shadcn-ui provides copy-paste components built on Radix UI primitives styled with Tailwind, enabling rapid UI construction by copying components into your project rather than installing them as dependencies.

Core Features & Use Cases

  • Copy-paste components into your project (src/components/ui/ or configured path), reducing setup time.
  • Variants and customization using CVA for size, color, and style variations.
  • Ensure correct project configuration with components.json, path alias, and CSS variables for theming.

Quick Start

Run the Basic command to add a component, e.g., pnpm dlx shadcn@latest add <component>.

Frequently Asked Questions about shadcn-ui

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

FAQPage Schema
What is the best way to add shadcn/ui components to a frontend project?▼

To add shadcn/ui components, run `pnpm dlx shadcn@latest add <component>` to copy-paste components directly into your configured path like `src/components/ui/`, avoiding external dependencies.

How do I customize shadcn/ui component variants with Tailwind?▼

Customize shadcn/ui component variants using Class Variance Authority (CVA) to define size, color, and style variations, applying Tailwind CSS classes to the Radix UI primitives.

Do I need components.json and path aliases configured before adding shadcn/ui?▼

Yes, adding shadcn/ui requires validating project configurations like `components.json`, path aliases such as `@/components/ui/...`, and CSS variables to ensure predictable component integration and theming.

How does shadcn/ui handle Radix UI primitives and CSS variables for theming?▼

Shadcn/ui styles Radix UI primitives using Tailwind and CSS variables for theming, allowing you to copy components into your project and manage visual styles directly rather than relying on installed packages.

Can I use shadcn/ui as an installed component library dependency?▼

No, shadcn/ui is not an installed dependency; it copies component code directly into your project directory, giving you full control to modify and customize the Radix UI primitives and Tailwind styles.

Related Skills

Explore More Software Engineering Skills→
linehaul-ailinehaul-ai
4

shadcn-svelte-skill

Install and customize shadcn-svelte UI components in SvelteKit projects.

Official
Intermediate
planetaryescapeplanetaryescape

auto-generated-shadcn-ui-patterns

Define and reuse CVA-based UI variants for shadcn/ui components in React.

Official
Advanced
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
arthtyagiarthtyagi
1

react-best-practices

Review React and Next.js TSX files for performance, accessibility, hook, and component-pattern issues.

Community
Advanced