SkillsAdd

smithery.ai

shadcn-expert

Definitive reference and behavioral guide for the shadcn/ui ecosystem.

Installation

$ npx skills add https://smithery.ai
View on skills.sh ↗

Summary

  • Definitive reference and behavioral guide for the shadcn/ui ecosystem.
  • Use when asked to (1) install or configure shadcn/ui, (2) add, customize, or search for shadcn/ui components, (3) build forms with react-hook-form and zod, (4) implement dark mode or theming, or (5) create/publish shadcn component registries.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
shadcn-ui Similar name
google-labs-code/stitch-skills 50.7K installs
shadcn Similar name
vercel-labs/json-render

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, addi…

2.1K installs

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai
smithery-ai-cli 7.8K frontend-design 6.2K skill-creator 2.5K ck:ui-ux-pro-max 1.3K pdf 1.2K xlsx 966 pptx 894 docx 884 webapp-testing 1 web-design-reviewer 657

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Declared

Skill metadata

Parsed from SKILL.md frontmatter.

Declared agents opencode

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,927 B
  • docs SUMMARY.md 334 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

shadcn/ui Expert

This skill provides the definitive behavior and workflow for interacting with the shadcn/ui ecosystem. shadcn/ui is a collection of beautifully-designed, accessible components and a code distribution platform built with TypeScript, Tailwind CSS, and Radix UI primitives.

Core Principles

  • Open Code: Components are downloaded into the project's source code (usually components/ui). They are meant to be customized, not treated as black-box dependencies.
  • Composition: Build complex UIs by composing simpler primitives.
  • Tailwind CSS: Styling is done via Tailwind CSS utility classes and CSS variables for theming.
  • Accessibility: Built on Radix UI, preserving ARIA labels and keyboard navigation is non-negotiable.
  • Iconography: Use lucide-react for all icons unless otherwise specified.

AI & MCP Tools Integration

You have access to shadcn MCP server tools. Always use these tools proactively:

  1. Search: Use shadcnsearchitemsinregistries to find components.
  2. Examples: Use shadcngetitemexamplesfrom_registries (e.g., sidebar-demo, chart-demo, data-table-demo) to understand implementation. This is critical for complex components.
  3. Add Components: Use shadcngetaddcommandfor_items to get the CLI command.
  4. Audit: Run shadcngetaudit_checklist after generating code.

Workflows

1. Project Setup

  • Check for components.json. If missing, run npx shadcn@latest init.
  • For React 19 and Tailwind v4, ensure you use the @latest CLI which handles the new CSS-variable-based configuration in globals.css (instead of tailwind.config.js).

2. Adding Components

  • Always use the CLI: npx shadcn@latest add <component_name>.
  • For complex layouts, look for Blocks at ui.shadcn.com/blocks.

3. Complex Components

  • Sidebar: Requires SidebarProvider, Sidebar, SidebarContent, etc. Always fetch the latest example as the API is highly specific.
  • Charts: Built on Recharts. Use ChartConfig for theming and ChartContainer for responsive sizing.
  • Forms: Use react-hook-form + zod. See [forms.md](references/forms.md).

4. Theming and Dark Mode

  • Theming uses CSS variables in globals.css.
  • Use next-themes for Next.js. See [dark-mode.md](references/dark-mode.md).

5. Creating Registries

  • Follow the schemas in [registry.md](references/registry.md).

Troubleshooting

1. Import Errors (@/lib/utils)

  • Ensure @/lib/utils exists and contains the cn helper.
  • Verify path aliases in tsconfig.json or jsconfig.json (usually "@/": ["./"] or "@/": ["./src/"]).
  • If using Tailwind v4, check that globals.css is correctly importing the shadcn theme variables.

2. Hydration Mismatch (Next.js)

  • For interactive components like Dialogs, Drawers, or Sidebars, wrap them in a client-only check if they cause hydration errors.
  • Ensure the ThemeProvider has suppressHydrationWarning on the <html> tag.

3. Missing Peer Dependencies

  • Some complex components require additional libraries (e.g., framer-motion for some animations or lucide-react for icons).
  • If a component fails to render, check the console for missing dependency errors and install them via npm install.

4. Tailwind Variable Issues

  • If colors appear as white or transparent, ensure the globals.css file contains the @layer base styles and CSS variables (e.g., --background, --primary).
  • In Tailwind v4, ensure you are using the correct @theme block syntax.