skills.rest
Ramadan-Elgamal
Ramadan-ElgamalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

Manages shadcn/ui components, presets, and registries through the shadcn CLI.

Updated Aug 7, 2026
Search Tags:#react#cli#registry#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill shadcn-ramadan-elgamal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Ramadan-Elgamal/Autobees/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill shadcn-ramadan-elgamal

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 configuration details. This Skill provides the operational knowledge to add, search, update, and debug shadcn/ui components correctly, avoiding common mistakes like wrong import aliases, invalid composition, or raw color overrides. ## Core Features & Use Cases - Component Management: Add, search, view, and update components from official, namespaced, or GitHub registries using the shadcn CLI with dry-run and diff previews. - Composition & Styling Rules: Enforces correct patterns for forms (FieldGroup/Field), chat UI (MessageScroller/Bubble), icons (data-icon), and semantic Tailwind tokens. - Preset & Theme Workflows: Initialize projects with presets, apply or merge preset codes, and customize themes via CSS variables in Tailwind v3 or v4 setups. - Use Case: When asked to build a settings form in a Next.js project, the Skill checks 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 such as a dialog or build a form following shadcn best practices in your 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 the component names, using your project's package runner such as 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 local changes?▼

Use 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 for composition while Base uses render, and components like Select, ToggleGroup, Slider, and Accordion have different props between the two.

Can I use shadcn/ui with Tailwind CSS v4?▼

Yes, shadcn/ui supports both Tailwind v3 and v4. Check the tailwindVersion field from npx shadcn@latest info: v4 projects register custom colors in @theme inline blocks, while v3 projects use tailwind.config.js.

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

Run npx shadcn@latest apply <code> inside a project that already has a components.json file. Use --only theme or --only font for partial updates, and never decode preset codes manually since the CLI handles resolution.

Why do third-party registry components have broken imports after install?▼

Community registry items may use hardcoded paths like @/components/ui that do not match your project's aliases. Run npx shadcn@latest info to get the correct ui alias and rewrite the imports in the added files accordingly.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

shadcn

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

Official
Intermediate
LrmdomLrmdom

zod

Validate runtime data and infer TypeScript types with Zod schemas.

Community
Advanced
murphytruemanmurphytrueman
155

theme-audit

Audit design system theme coverage, consistency, and component tier propagation.

Community
Advanced
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate