skills.rest
MohamadJoumaa
MohamadJoumaaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

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

Updated Aug 26, 2026
Search Tags:#react#cli#registry#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/MohamadJoumaa/Direct --skill shadcn-mohamadjoumaa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/MohamadJoumaa/Direct/tree/main/.cursor/skills/shadcn
Command: npx skills add https://github.com/MohamadJoumaa/Direct --skill shadcn-mohamadjoumaa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building UI with shadcn/ui requires knowing the correct component APIs, composition rules, and CLI workflows, and mistakes like wrong imports, missing groups, or raw color overrides are common. This Skill injects project context, enforces composition and styling rules, and drives the shadcn CLI so components are added, updated, and styled correctly. ## Core Features & Use Cases - Component management: Search registries, preview with --dry-run/--diff, add components, and smart-merge upstream updates while preserving local changes. - Rule enforcement: Applies Incorrect/Correct patterns for forms (FieldGroup/Field), composition (Groups, Dialog titles, Card structure), icons (data-icon), styling (semantic tokens, gap-, size-), and chat primitives (MessageScroller, Bubble, Attachment, Marker). - Preset and theme workflows: Init projects with named presets or codes, apply or merge presets, and customize CSS variables for Tailwind v3/v4. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads the project's components.json context, fetches component docs via the CLI, and generates code using FieldGroup, ToggleGroup, and data-invalid validation instead of hand-rolled markup. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern, for example: add a dialog and card to my project and build a profile settings form following shadcn rules.

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 namespaces like @magicui/item, 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 my local changes?▼

Run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect upstream changes. Apply upstream updates per file 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 for composition while Base uses render, and props differ for Select, ToggleGroup, Slider, and Accordion; 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. Presets accept named values like nova, base62 codes, or URLs from ui.shadcn.com.

Does shadcn/ui work with Tailwind CSS v4?▼

Yes, the CLI detects the Tailwind version via npx shadcn@latest info. Tailwind v4 projects register custom colors in @theme inline blocks in the global CSS file, while v3 projects extend tailwind.config.js instead.

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.

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
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
Daiwik-ChilukuriDaiwik-Chilukuri

normalize

Normalize UI implementations to match a project's design system and eliminate one-off styles.

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