skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

Updated Apr 19, 2026
Search Tags:#react#cli#registry#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill shadcn-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/shadcn
Command: npx skills add https://github.com/divinaarmuela/Content --skill shadcn-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building UI with shadcn/ui requires knowing the correct component APIs, composition rules, styling conventions, and CLI workflows; this Skill encodes those rules so generated code follows project configuration instead of guesswork. ## Core Features & Use Cases - Component Management: Search registries, add components, preview changes with dry-run and diff, and smart-merge upstream updates while preserving local edits. - Enforced Code Rules: Applies Incorrect/Correct patterns for forms (FieldGroup/Field), styling (semantic tokens, gap-, size-), composition (Groups, Titles, AvatarFallback), icons (data-icon), and chat primitives (MessageScroller, Bubble, Attachment, Marker). - Preset & Project Workflows: Initialize projects with templates and presets, decode and apply preset codes, and switch presets via overwrite, partial, merge, or skip strategies. - Use Case: Ask for a settings form in a Next.js project and receive code using FieldGroup, ToggleGroup, data-invalid validation, semantic colors, and the project's configured icon library. ## Quick Start Ask the assistant 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 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 apply or switch a shadcn preset code?▼

Use npx shadcn@latest apply <code> to overwrite an existing project's preset, or npx shadcn@latest init --preset <code> when initializing. Decode codes with preset decode and never construct preset URLs manually.

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, multiple booleans, items props on Select, and scalar Slider values.

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

Run npx shadcn@latest add <component> --dry-run to list affected files, then --diff <file> per file to compare upstream against local. Overwrite files without local changes and manually merge files you have customized.

Why should forms use FieldGroup and Field instead of divs?▼

FieldGroup and Field provide consistent layout, labeling, and validation wiring that raw divs with space-y-* lack. Validation requires data-invalid on the Field and aria-invalid on the control so both label and input style correctly.

Can I use community registries with the shadcn CLI?▼

Yes, search and add from namespaced registries like @acme configured in components.json, or public GitHub repos via owner/repo/item addresses. After adding third-party components, verify import aliases match the project's configured paths.

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
Benmore-StudioBenmore-Studio
1

pcs-new-service

Generate a complete PCS microservice scaffold with FastAPI, Kafka, and Docker.

Official
Advanced
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

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