·shadcn-ui

Install and use shadcn/ui with Tailwind v4 and Next.js (App Router), Vite, or manual setup; configure components.json, add components via CLI, theming with CSS only. Use when adding shadcn/ui, installing shadcn, using Button, Card, Dialog, Form, or other shadcn components, or when the user mentions shadcn, shadcn/ui, or Radix UI with Tailwind.

9Installs·2Trend·@enderpuentes

Installation

$npx skills add https://github.com/enderpuentes/ai-agent-skills --skill shadcn-ui

How to Install shadcn-ui

Quickly install shadcn-ui AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/enderpuentes/ai-agent-skills --skill shadcn-ui
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: enderpuentes/ai-agent-skills.

SKILL.md

View raw

shadcn/ui is a collection of accessible, customizable React components built on Radix UI and Tailwind CSS. Components are copied into your project (no npm package); you own and edit the code. Works with Next.js (App Router), Vite, and other React frameworks.

Principles: Open code (AI-ready), composable API, beautiful defaults, distribution via CLI and schema. Requires Tailwind v4 and path alias @/. We do not use tailwind.config.js; theme and setup are CSS-only (@import "tailwindcss" + @theme).

Choose framework (Next.js, Vite, etc.), style (new-york recommended), base color, and CSS variables. Then add components as needed.

Install and use shadcn/ui with Tailwind v4 and Next.js (App Router), Vite, or manual setup; configure components.json, add components via CLI, theming with CSS only. Use when adding shadcn/ui, installing shadcn, using Button, Card, Dialog, Form, or other shadcn components, or when the user mentions shadcn, shadcn/ui, or Radix UI with Tailwind. Source: enderpuentes/ai-agent-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/enderpuentes/ai-agent-skills --skill shadcn-ui
Category
*Creative Media
Verified
First Seen
2026-02-26
Updated
2026-03-10

Browse more skills from enderpuentes/ai-agent-skills

Quick answers

What is shadcn-ui?

Install and use shadcn/ui with Tailwind v4 and Next.js (App Router), Vite, or manual setup; configure components.json, add components via CLI, theming with CSS only. Use when adding shadcn/ui, installing shadcn, using Button, Card, Dialog, Form, or other shadcn components, or when the user mentions shadcn, shadcn/ui, or Radix UI with Tailwind. Source: enderpuentes/ai-agent-skills.

How do I install shadcn-ui?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/enderpuentes/ai-agent-skills --skill shadcn-ui Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/enderpuentes/ai-agent-skills

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-02-26