skills.rest
Ishaq74
Ishaq74COMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

Updated Mar 14, 2026
Search Tags:#react#design system#cli#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/Ishaq74/atomic --skill shadcn-ishaq74
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Ishaq74/atomic/tree/main/.github/skills/shadcn
Command: npx skills add https://github.com/Ishaq74/atomic --skill shadcn-ishaq74

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, icon library, base vs radix primitives). This Skill eliminates guesswork by injecting live project context and enforcing correct usage patterns when adding, updating, or debugging components. ## Core Features & Use Cases - CLI-driven component management: Search registries, add components, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local modifications. - Enforced composition and styling rules: Critical rules for forms (FieldGroup/Field), icons (data-icon), semantic colors, gap-based spacing, and base-vs-radix API differences. - Preset and theme workflows: Apply named presets or preset codes, switch themes with overwrite/merge/skip strategies, and customize CSS variables in Tailwind v3 or v4 projects. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads the project context via npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, ToggleGroup, and the project's configured icon library. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or card to your project and it will use the CLI to install and compose it correctly.

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, such as npx shadcn@latest add button card dialog. Use the package runner matching your project (npx, pnpm dlx, or bunx). Preview changes first with --dry-run or --diff before writing files.

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 see affected files, then --diff <file> to compare upstream changes. Apply upstream updates while preserving 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, multiple booleans, and array defaultValues. Check the base field via npx shadcn@latest info.

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

Yes, the CLI supports templates for Next.js, Vite, TanStack Start, React Router, Astro, and Laravel. All except Laravel support monorepo scaffolding via the --monorepo flag.

How do I apply or switch shadcn presets and themes?▼

Use npx shadcn@latest apply <code> to overwrite an existing project with a preset, or init --preset <code> --force --no-reinstall to update only config and CSS. Presets can be named (nova, vega), base62 codes, or URLs from ui.shadcn.com.

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

The skill enforces gap-* utilities instead of space-x-*/space-y-* and semantic tokens like bg-primary instead of raw colors like bg-blue-500. This keeps components themeable through CSS variables and consistent across light and dark modes.

Related Skills

Explore More Software Engineering Skills→
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
ForeverWorldForeverWorld

nextjs

Build React applications with Next.js App Router and Server Components.

Community
Advanced
AvaloniaUIAvaloniaUI
157

docusaurus-styling

Align Docusaurus visuals with the Avalonia Customer Portal theme using TailwindCSS and CSS variables.

Official
Intermediate
NoobyGainsNoobyGains
78

design-integration

Detect a project's design system and enforce its conventions for new UI components.

Community
Advanced