skills.rest
SethyRung
SethyRungCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

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

Updated Aug 5, 2024
Search Tags:#react#cli#tailwind#ui components#shadcn#presets#component registry
One-click install
npx skills add https://github.com/SethyRung/movie-next --skill shadcn-sethyrung
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/SethyRung/movie-next/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/SethyRung/movie-next --skill shadcn-sethyrung

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 like aliases, icon libraries, and base vs radix primitives. This Skill injects project context and enforces correct patterns so generated UI code matches the project's setup instead of using guessed APIs or hardcoded paths. ## Core Features & Use Cases - Component lifecycle management: Search registries, preview changes with --dry-run and --diff, add components, and smart-merge upstream updates while preserving local modifications. - Enforced composition and styling rules: FieldGroup-based forms, semantic color tokens, data-icon attributes, gap-* spacing, and correct Group/Item nesting with Incorrect/Correct code pairs. - Preset and theme workflows: Init projects with named presets or codes, apply or merge preset switches, and customize themes via CSS variables in Tailwind v3 or v4. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads the project config 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 the current project and compose it into a small UI section.

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 --dry-run to preview changes and --diff to compare against existing files before overwriting.

How do I update shadcn components without losing local changes?▼

Run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect upstream changes per file. 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 and component APIs. Radix uses asChild and type props, while base uses render, multiple booleans, and items props on Select. 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. With v4, custom colors are registered in @theme inline blocks in the global CSS file; with v3 they go in tailwind.config.js. Check tailwindVersion via npx shadcn@latest info.

How do I switch shadcn presets without breaking components?▼

Choose overwrite, partial, merge, or skip. Use npx shadcn@latest apply <code> to overwrite, --only theme,font for partial updates, or init --preset <code> --force --no-reinstall followed by per-component smart merges to preserve customizations.

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

The skill's rules require gap-* with flex 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 in dark mode.

Related Skills

Explore More Software Engineering Skills→
dsgalkardsgalkar

shadcn

Guides shadcn/ui CLI usage, component installation, theming, and custom registry workflows.

Community
Intermediate
trungenglishtrungenglish
1

expo-ui

Build native iOS and Android UI in React using @expo/ui SwiftUI and Jetpack Compose components.

Community
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

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

Official
Advanced