skills.rest
sota411
sota411COMMUNITY
Explore all skills by this author →
GitHub

shadcn

Manage shadcn/ui components, registries, and presets through the official CLI.

1|Updated Jul 16, 2026
Search Tags:#react#cli#registry#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/sota411/codex-config --skill shadcn-sota411
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/sota411/codex-config/tree/main/user-skills/shadcn
Command: npx skills add https://github.com/sota411/codex-config --skill shadcn-sota411

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with shadcn/ui involves many CLI commands, registry addresses, preset codes, and strict composition rules that are easy to get wrong. This Skill guides the AI to use the shadcn CLI correctly, follow enforced styling and composition rules, and avoid common mistakes like raw color values, missing DialogTitle, or incorrect base-vs-radix APIs. ## Core Features & Use Cases - Component lifecycle management: Search registries, preview with --dry-run/--diff, add components, and smart-merge upstream updates while preserving local changes. - Preset and theme workflows: Initialize projects with named presets or codes, apply presets with overwrite/partial/merge/skip strategies, and customize CSS variables for Tailwind v3 or v4. - Enforced code-quality rules: Critical rules for forms (FieldGroup/Field), composition (Groups, Card, overlays), icons (data-icon), and styling (semantic tokens, gap-*, cn()). - Use Case: When asked to build a settings form in a Next.js project, the Skill checks project context via npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, ToggleGroup, and data-invalid validation states instead of ad-hoc markup. ## Quick Start Ask the AI to add a shadcn/ui component such as a dialog or build a settings form in your project, and it will use the shadcn CLI and enforced rules to produce 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 project?▼

Run npx shadcn@latest add followed by component names, registry-prefixed names like @magicui/shimmer-button, or GitHub addresses like owner/repo/item. Use --dry-run and --diff first to preview exactly which files and CSS changes would be made.

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

Use the smart merge workflow: run npx shadcn@latest add <component> --dry-run to list affected files, then --diff <file> per file to compare upstream changes. Apply upstream updates manually where local modifications exist, and never use --overwrite without explicit approval.

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

The base field in components.json determines the primitive library and component APIs. Radix uses asChild and type="single"/"multiple" props, while base uses render props, multiple booleans, items arrays on Select, and scalar Slider values. Check the base field via npx shadcn@latest info.

How do I apply or switch shadcn presets in an existing project?▼

Use npx shadcn@latest apply <code> to overwrite preset-driven config, fonts, and components, or apply --only theme,font for partial updates. To preserve customized components, run init --preset <code> --force --no-reinstall and smart-merge components individually.

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

The enforced styling rules require flex with gap-* instead of space-x-*/space-y-*, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. Semantic tokens handle dark mode automatically through CSS variables.

Can I use shadcn/ui with Tailwind v3 and v4?▼

Yes, the CLI detects the Tailwind version via npx shadcn@latest info. Tailwind v4 registers custom colors in @theme inline blocks in the global CSS file, while v3 uses tailwind.config.js theme.extend.colors.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

shadcn

Guides shadcn/ui CLI usage, component installation, theming, and custom registry creation.

Official
Intermediate
anicca-labsanicca-labs

form

Generate and validate React Native/Expo form components from Zod schemas.

Official
Intermediate
mParticlemParticle
7

add-icon

Register new mParticle SVG icons into the Aquarium library with synchronized updates.

Official
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced