skills.rest
Mark-Atef
Mark-AtefCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

Updated Aug 3, 2026
Search Tags:#react#design system#cli#registry#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/Mark-Atef/Nebu --skill shadcn-mark-atef
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Mark-Atef/Nebu/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Mark-Atef/Nebu --skill shadcn-mark-atef

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 eliminates guesswork by injecting live project context, enforcing correct component usage patterns, and driving the shadcn CLI for adding, searching, updating, and theming components. ## Core Features & Use Cases - Component Management: Search registries, add components, preview changes with dry-run and diff, and smart-merge upstream updates while preserving local modifications. - Composition & Styling Rules: Enforces correct patterns for forms (FieldGroup/Field), overlays, chat primitives (MessageScroller, Bubble), icons, and semantic Tailwind tokens, with Incorrect/Correct code pairs. - Presets & Theming: Initialize projects with named presets or preset codes, switch themes via apply/merge/skip workflows, and customize CSS variables for Tailwind v3/v4. - Use Case: Ask the assistant to build a settings form in a Next.js project; it reads the project config 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: add a login form block to my project using the shadcn CLI.

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 my 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, 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.

How do I change the theme or preset of an existing shadcn project?▼

Use npx shadcn@latest apply <code> to overwrite with a new preset, or --only theme,font for partial updates. To preserve customized components, run init --preset <code> --force --no-reinstall and smart-merge components individually.

Why should I not use space-y or raw color classes with shadcn/ui?▼

shadcn/ui components rely on semantic CSS variable tokens like bg-primary and text-muted-foreground so themes and dark mode work automatically. Use flex with gap-* for spacing and semantic tokens instead of raw values like bg-blue-500 or manual dark: overrides.

Can I use shadcn/ui with icon libraries other than Lucide?▼

Yes, the iconLibrary field in the project configuration determines icon imports, such as @tabler/icons-react for tabler. Always check npx shadcn@latest info and swap icon imports to match the configured library rather than assuming lucide-react.

Related Skills

Explore More Software Engineering Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
dallaydallay

building-mcp-server-on-cloudflare

Build and deploy remote MCP servers on Cloudflare Workers with OAuth 2.1.

Official
Advanced
murphytruemanmurphytrueman
155

theme-audit

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

Community
Advanced
JNZader-VaultJNZader-Vault

mantine-ui

Build React interfaces with Mantine components, forms, charts, and notifications.

Official
Intermediate