skills.rest
Aeonxuu
AeonxuuCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Manages shadcn/ui components via CLI for adding, searching, styling, and composing React UI.

Updated May 9, 2026
Search Tags:#React#design system#cli#registry#tailwind#ui components#ShadCN
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill shadcn-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill shadcn-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with shadcn/ui requires knowing the correct CLI commands, component composition rules, and project-specific configuration (aliases, Tailwind version, icon library, base vs radix primitives). This Skill injects project context and enforces correct patterns so generated UI code follows shadcn/ui conventions instead of guessing APIs or writing custom markup. ## 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. - Enforced composition and styling rules: FieldGroup-based forms, semantic color tokens, data-icon attributes, gap-* spacing, and accessibility requirements like DialogTitle and AvatarFallback. - Preset and theme workflows: Initialize projects with named presets or preset codes, switch presets via overwrite/partial/merge/skip strategies, and customize themes through CSS variables. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads the project config, fetches component docs via npx shadcn@latest docs, and generates code using FieldGroup, ToggleGroup, and proper validation states matching the project's base library and icon set. ## Quick Start Ask the AI to add a shadcn/ui component like a dialog or build a settings form, and it will use the shadcn CLI and project context 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 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 to preview changes and --diff to compare against existing files before writing.

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

Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect upstream changes per file. Overwrite files with no local changes and manually merge files you have customized, never using --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, which changes component APIs. Radix uses asChild and type="single" props, while base uses render, multiple booleans, items props on Select, and scalar Slider values.

How do I switch or apply a shadcn preset code?▼

Pass the preset code directly to npx shadcn@latest apply <code> for existing projects or init --preset <code> for new ones. Never decode codes manually; use preset decode, preset url, or preset resolve to inspect them first.

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

shadcn/ui conventions require flex with gap-* for spacing and semantic tokens like bg-primary or text-muted-foreground for colors. Raw values like bg-blue-500 and space-y-* break theming, dark mode, and component consistency.

Can I use community registries with the shadcn CLI?▼

Yes, the CLI supports namespaced registries configured in components.json and public GitHub repos with a root registry.json via owner/repo/item addresses. After adding third-party components, verify imports match your project's aliases and icon library.

Related Skills

Explore More Software Engineering Skills→
dsgalkardsgalkar

shadcn

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

Community
Intermediate
GuibibiGuibibi

nuxt-ui

Build styled Nuxt 4 and Vue 3 interfaces with @nuxt/ui v4 components.

Community
Advanced
zaid-khan-codezaid-khan-code
3

shadcn-code-review

Review shadcn/ui React components for CVA, composition, and accessibility issues.

Community
Intermediate
JNZader-VaultJNZader-Vault

mantine-ui

Build React interfaces with Mantine components, forms, charts, and notifications.

Official
Intermediate