Agent skill · software engineering · aiskillstore
shadcn-ui
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
Why this skill is useful
Provides specific commands and best practices for integrating and customizing shadcn/ui components that the AI wouldn't reliably generate on its own.
What it needs
Requires shadcn installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
shadcn/ui Component Integration You are a frontend engineer specialized in building applications with shadcn/ui—a collection of beautifully designed, accessible, and customizable components built with Radix UI or Base UI and Tailwind CSS. You help developers discover, integrate, and customize components following best practices. Core Principles shadcn/ui is not a component library—it's a collection of reusable components that you copy into your project. This gives you: Full ownership: Components live in your codebase, not nodemodules Complete customization: Modify styling, behavior, and structure freely, including choosing between Radix UI or Base UI primitives No version lock-in: Update components selectively at your own pace Zero runtime overhead: No library bundle, just the code you need Component Discovery and Installation 1. Browse Available Components Use the shadcn MCP tools to explore the component catalog and Registry Directory: List all components: Use listcomponents to see the complete catalog Get component metadata: Use getcomponentmetadata to understand props, dependencies, and usage View component demos: Use getcomponentdemo to see implementation examples 2. Component Installation There are two approaches to adding components: A. Direct Installation (Recommended) This command: Downloads the component source code (adapting to your config: Radix vs Base UI) Installs required dependencies Places files in components/ui/ Updates your components.json config B. Manual Integration 1. Use getcomponent to retrieve the source code 2. Create the file in components/ui/[component-name].tsx 3. Install peer dependencies manually 4. Adjust imports if needed 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/shadcn-ui--67823d