skills.rest
DucCuong159
DucCuong159COMMUNITY
Explore all skills by this author →
GitHub

shadcn

Manages shadcn/ui components via CLI for building React design systems.

Updated Aug 11, 2026
Search Tags:#frontend#react#design system#cli#tailwind css#ui components#shadcn
One-click install
npx skills add https://github.com/DucCuong159/Realtime-chatapp --skill shadcn-duccuong159
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/DucCuong159/Realtime-chatapp/tree/main/.agent/skills/shadcn
Command: npx skills add https://github.com/DucCuong159/Realtime-chatapp --skill shadcn-duccuong159

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent React UIs with shadcn/ui requires knowing the correct component APIs, composition rules, and CLI workflows, and mistakes like wrong imports, missing accessibility titles, or raw color overrides lead to inconsistent design systems. ## Core Features & Use Cases - Component Lifecycle Management: Search registries, preview changes with dry-run and diff, and install or update components through the shadcn CLI. - Composition & Styling Rules: Enforces correct patterns such as FieldGroup forms, semantic color tokens, gap-based spacing, and data-icon attributes. - Project Context Awareness: Reads framework, Tailwind version, aliases, icon library, and base (radix vs base) from project info to generate matching code. - Use Case: When adding a settings form to a Next.js app, the skill checks installed components, fetches official docs, and generates code using FieldGroup, ToggleGroup, and proper validation states. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or form to your project and it will use the CLI and rules to generate correct code.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add shadcn/ui components to my React project?▼

Run npx shadcn@latest add followed by the component names, using your project's package runner such as pnpm dlx or bunx. Check installed components first with npx shadcn@latest info to avoid re-adding existing ones.

How do I update shadcn/ui components without losing local changes?▼

Use npx shadcn@latest add <component> --dry-run to preview affected files, then --diff <file> to compare upstream changes against your local version. Apply upstream updates per file while preserving your modifications, and never use --overwrite without explicit approval.

What is the difference between radix and base in shadcn/ui?▼

The base field in project config determines the primitive library, which changes component APIs. Radix uses asChild and type props, while base uses render, multiple booleans, and items props on Select. Check the base field via npx shadcn@latest info.

Does shadcn/ui work with Vite and frameworks other than Next.js?▼

Yes, the CLI supports next, vite, start, react-router, and astro templates, all with monorepo scaffolding via the --monorepo flag. Laravel is also supported but without monorepo scaffolding.

Why should I avoid space-y and raw colors in shadcn/ui code?▼

The styling rules require gap-* utilities instead of space-x or space-y, and semantic tokens like bg-primary instead of raw colors like bg-blue-500. This keeps components consistent with the theme's CSS variables and dark mode behavior.

Related Skills

Explore More Software Engineering Skills→
vercelvercel
246

shadcn

Guide shadcn/ui component implementation and theming in Next.js and Vite projects.

Official
Advanced
cpfcoachingcpfcoaching

openai-cloudflare-deploy

Automate application and infrastructure deployment on Cloudflare Workers and Pages.

Community
Advanced
KazmerMaximilianoKazmerMaximiliano

neus-theme-preview

Generates a visual preview of Neus UI theme tokens and component styles for review.

Community
Basic
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate