skills.rest
ebecerra-developer
ebecerra-developerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

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

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

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 patterns, CLI commands, and project configuration. This Skill provides the operational knowledge to add, search, update, debug, and style shadcn/ui components correctly, avoiding common mistakes like wrong imports, invalid composition, or non-semantic styling. ## Core Features & Use Cases - Component Management: Add, search, view, and update components from official and community registries using the shadcn CLI with dry-run and diff previews. - Enforced Best Practices: Applies critical rules for forms (FieldGroup/Field), composition (Groups, Titles, Card structure), icons (data-icon), and styling (semantic tokens, gap-*, cn()). - Project-Aware Guidance: Reads project context (framework, Tailwind version, base vs radix, icon library, aliases) via npx shadcn@latest info to generate code matching the exact project setup. - Use Case: Ask to build a settings form in a Next.js project, and get correct FieldGroup + Field layout, ToggleGroup for options, data-invalid validation states, and icons from the project's configured icon library. ## Quick Start Ask the assistant to add a shadcn/ui button component to the project and build a login form following the project's configured preset and icon library.

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 React 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 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 the base field via npx shadcn@latest info before writing component code.

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

Yes, the CLI supports templates for next, vite, start (TanStack Start), react-router, astro, and laravel. All except laravel support monorepo scaffolding via the --monorepo flag. Initialize with npx shadcn@latest init --template vite.

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

shadcn/ui conventions require gap-* with flex layouts instead of space-x-*/space-y-*, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. Semantic tokens handle dark mode automatically through CSS variables, while raw values break theming.

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

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

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
GuibibiGuibibi

nuxt-ui

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

Community
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