skills.rest
ahemdatef
ahemdatefCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

Updated May 12, 2026
Search Tags:#theming#frontend#react#cli#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/ahemdatef/Gradution-Project-iLMS-Software --skill shadcn-ahemdatef
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/ahemdatef/Gradution-Project-iLMS-Software/tree/main/frontend/.agents/skills/shadcn
Command: npx skills add https://github.com/ahemdatef/Gradution-Project-iLMS-Software --skill shadcn-ahemdatef

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent React UI with shadcn/ui requires knowing the correct component APIs, composition rules, Tailwind conventions, and CLI workflows. This Skill eliminates guesswork by injecting live project context (framework, aliases, Tailwind version, icon library, base vs radix) and enforcing correct usage patterns for every component. ## Core Features & Use Cases - Component Management: Search registries, add components, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local modifications. - Enforced Best Practices: Critical rules for forms (FieldGroup/Field), styling (semantic tokens, gap-* spacing), composition (Groups, Titles, AvatarFallback), and icons (data-icon, no sizing classes). - Preset & Theme Workflows: Initialize projects with named presets or preset codes, switch themes via overwrite/merge/skip strategies, and customize CSS variables in Tailwind v3 or v4 setups. - Use Case: When asked to build a settings form in a Next.js app, the Skill checks installed components, fetches official docs via the CLI, and generates code using FieldGroup, ToggleGroup, and proper validation attributes instead of raw divs and manual state. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern, for example: create a dashboard with stat cards using shadcn/ui components.

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 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. Check the base field via npx shadcn@latest info.

Does shadcn/ui work with Tailwind CSS v4?▼

Yes, shadcn/ui supports both Tailwind v3 and v4. The tailwindVersion field from npx shadcn@latest info tells you which: v4 uses @theme inline blocks in the global CSS file, while v3 registers custom colors in tailwind.config.js.

How do I apply a preset theme to an existing shadcn project?▼

Run npx shadcn@latest apply --preset <code> inside your project directory to overwrite components, fonts, and CSS variables. To preserve customized components, use init --preset <code> --force --no-reinstall instead, then smart-merge components individually.

Why should I not fetch shadcn component files from GitHub manually?▼

Manual fetching bypasses registry resolution, file path mapping, and CSS diffing that the CLI handles automatically. Always use npx shadcn@latest add with --dry-run, --diff, or --view to preview and install components correctly for your project configuration.

Related Skills

Explore More Software Engineering Skills→
TierOne-StudioTierOne-Studio
1

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui, Vite, and React including dark mode theming.

Official
Intermediate
Arnutt-NArnutt-N

CI/CD & Containerization

Automate CI/CD pipelines and containerized deployments for HR-IMS with Docker and GitHub Actions.

Community
Advanced
LinusConradMLinusConradM

qa-tester

Audit the CRPD Dashboard for QA and WCAG accessibility issues.

Community
Intermediate
DagimAlemayehuuDagimAlemayehuu

shadcn-ui

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

Community
Intermediate