skills.rest
zester4
zester4COMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

2|1|Updated Jun 9, 2026
Search Tags:#react#cli#registry#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/zester4/zilmate --skill shadcn-zester4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/zester4/zilmate/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/zester4/zilmate --skill shadcn-zester4

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent UI with shadcn/ui requires knowing the correct component APIs, composition rules, Tailwind conventions, and CLI workflows. This Skill eliminates guesswork by injecting project context, enforcing correct usage patterns, and driving the official shadcn CLI for installs, updates, presets, and registry operations. ## Core Features & Use Cases - Component lifecycle management: Search registries, preview with dry-run/diff, add or update components, and smart-merge upstream changes while preserving local edits. - Enforced UI rules: Applies critical rules for forms (FieldGroup/Field), composition (Groups, Titles, Card structure), icons (data-icon, icon library), and styling (semantic tokens, gap-*, cn()). - Preset and theme workflows: Init projects with named presets or codes, apply or merge presets, and customize themes via CSS variables for Tailwind v3/v4. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads project context via npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes. ## 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 in my project.

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 update shadcn components without losing local changes?▼

Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect 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. Radix uses asChild for composition while base uses render, and APIs differ for Select items, ToggleGroup multiple, Slider values, and Accordion defaults. Check the base field via npx shadcn@latest info.

How do I apply or switch shadcn presets?▼

Use npx shadcn@latest apply <code> to overwrite an existing project's preset, or init --preset <code> --force --no-reinstall to update only config and CSS. Preset codes are opaque base62 strings that must be passed directly to the CLI, never decoded manually.

Does shadcn/ui work with Tailwind v4 and v3?▼

Yes, both versions are supported. Tailwind v4 registers custom colors via @theme inline blocks in the global CSS file, while v3 uses tailwind.config.js. Check the tailwindVersion field from npx shadcn@latest info to determine which approach applies.

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

The skill enforces 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. This keeps components themeable through CSS variables and consistent across light and dark modes.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

shadcn

Configure shadcn/ui components and registries across supported frameworks.

Community
Advanced
offers-pngoffers-png

fullstack-js

Define architecture, data modeling, and end-to-end conventions for full-stack JavaScript applications.

Community
Advanced
Project-X-VietnamProject-X-Vietnam
1

web-test

Execute browser-based QA tests with Playwright MCP across multiple viewport sizes.

Official
Intermediate
denish12denish12

design_systems

Coordinates React UI library integration across shadcn/ui, Mantine, and Wix Design System with themes and wrappers.

Community
Advanced