skills.rest
scitix
scitixOFFICIAL
Explore all skills by this author →
GitHub

shadcn

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

11|Updated Apr 30, 2026
Search Tags:#frontend#react#cli#tailwind css#ui components#shadcn#presets
One-click install
npx skills add https://github.com/scitix/Agent-Sandbox --skill shadcn-scitix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/scitix/Agent-Sandbox/tree/main/dashboard/.claude/skills/shadcn
Command: npx skills add https://github.com/scitix/Agent-Sandbox --skill shadcn-scitix

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 eliminates guesswork by injecting live project context and enforcing correct usage patterns, preventing common mistakes like wrong imports, invalid composition, and non-semantic styling. ## 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 Best Practices: Critical rules for forms (FieldGroup/Field), styling (semantic tokens, gap-* spacing), icons (data-icon), and composition (Groups, Titles, AvatarFallback) with Incorrect/Correct code pairs. - Preset & Theme Workflows: Initialize projects with named presets or codes, switch presets via overwrite/partial/merge/skip strategies, and customize themes through CSS variables. - Use Case: When asked to build a settings form, the Skill checks installed components, fetches official docs via the CLI, and generates code using FieldGroup, ToggleGroup, and proper validation attributes matching the project's radix or base configuration. ## Quick Start Ask the assistant to add a shadcn/ui component like a dialog or build a form, and it will use the shadcn CLI with your project's configuration 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, using your project's package runner (npx, pnpm dlx, or bunx). Check installed components first with npx shadcn@latest info, and preview changes with --dry-run or --diff before writing files.

How do I update shadcn components without losing my customizations?▼

Use the smart merge workflow: run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to compare upstream changes against your local version. Apply upstream updates manually where you have local modifications, 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, which changes component APIs. Radix uses asChild and type="single"/"multiple" props, while base uses render props, multiple booleans, and array defaultValues. Check your project's base field with npx shadcn@latest info.

Does shadcn/ui support Tailwind CSS v4?▼

Yes, shadcn/ui supports both Tailwind v3 and v4. The tailwindVersion field from npx shadcn@latest info tells you which to use: v4 registers custom colors via @theme inline blocks, while v3 uses tailwind.config.js. Always edit the existing global CSS file, never create a new one.

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

Use npx shadcn@latest apply <code> to overwrite, apply --only theme,font for partial updates, or init --preset <code> --force --no-reinstall to skip component changes. For merging while preserving customizations, combine --no-reinstall with per-component smart merges using --dry-run and --diff.

Why should I not use space-y or raw color classes with shadcn components?▼

shadcn/ui enforces gap-* for spacing instead of space-x-*/space-y-*, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. This ensures components respond correctly to theme changes and dark mode via CSS variables.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

shadcn

Configure shadcn/ui components and registries across supported frameworks.

Community
Advanced
lenneTechlenneTech

developing-lt-frontend

Develop lenne.tech Nuxt 4 frontends with TypeScript, Valibot forms, and generated API types.

Official
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
mgd34msumgd34msu
4

chakra-ui

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

Community
Intermediate