skills.rest
mrisoli
mrisoliCOMMUNITY
Explore all skills by this author →
Website𝕏@mgrisoliGitHub

shadcn

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

Updated May 28, 2026
Search Tags:#theming#react#cli#tailwind#ui components#shadcn#component registry
One-click install
npx skills add https://github.com/mrisoli/pokerhouse --skill shadcn-mrisoli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/mrisoli/pokerhouse/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/mrisoli/pokerhouse --skill shadcn-mrisoli

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 like aliases, Tailwind version, and icon libraries. This Skill provides the operational knowledge to add, update, debug, and style shadcn/ui components correctly without guessing APIs or violating composition rules. ## Core Features & Use Cases - Component Management: Add, search, view, and update components from registries using the shadcn CLI with dry-run and diff previews before overwriting local changes. - Composition & Styling Rules: Enforces correct patterns such as FieldGroup-based forms, semantic color tokens, gap-based spacing, data-icon attributes, and base-vs-radix API differences. - Preset & Theme Handling: Apply, decode, and switch presets (named or code-based) with overwrite, partial, merge, or skip strategies, plus CSS variable theming guidance. - Use Case: When asked to build a settings form in a Next.js project, the Skill checks installed components, fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes matching the project's preset and icon library. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or card to your project and compose it into a working UI following the project's configuration.

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 the package runner matching your project (npx, pnpm dlx, or bunx). Check installed components first with npx shadcn@latest info to avoid re-adding existing ones.

How do I update shadcn components without losing my 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 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 components like Select, ToggleGroup, Slider, and Accordion have different props between the two. Check the base field via npx shadcn@latest info.

How do I apply or switch a shadcn preset theme?▼

Use npx shadcn@latest apply <code> to overwrite an existing project with a preset, or npx shadcn@latest init --preset <code> --force --no-reinstall to update only config and CSS. Partial updates are supported with --only theme,font. Never decode preset codes manually.

Why should I avoid space-y and raw Tailwind colors in shadcn/ui?▼

shadcn/ui conventions require 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. Semantic tokens handle dark mode automatically through CSS variables.

Does shadcn/ui work with frameworks other than Next.js?▼

Yes, the CLI supports templates for next, vite, start (TanStack Start), react-router, and astro, all with monorepo support, plus laravel without monorepo support. The framework is auto-detected and reported by npx shadcn@latest info.

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
thkim2015thkim2015

moai-platform-deployment

Deploy and host applications on Vercel, Railway, and Convex platforms.

Community
Advanced
murphytruemanmurphytrueman
155

theme-audit

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

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