Agent skill · software engineering · aiskillstore
shadcn-ui
Complete shadcn/ui component library guide including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
Why this skill is useful
Provides specific installation commands and configuration patterns for shadcn/ui components that the AI wouldn't reliably generate on its own.
What it needs
Requires npm, npx installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
shadcn/ui Component Patterns Expert guide for building accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS. Table of Contents When to Use Quick Start Installation & Setup Project Configuration Core Components Button Input & Form Fields Forms with Validation Card Dialog (Modal) Select (Dropdown) Sheet (Slide-over) Menubar & Navigation Table Toast Notifications Advanced Patterns Customization Next.js Integration Best Practices Common Component Combinations When to Use Setting up a new project with shadcn/ui Installing or configuring individual components Building forms with React Hook Form and Zod validation Creating accessible UI components (buttons, dialogs, dropdowns, sheets) Customizing component styling with Tailwind CSS Implementing design systems with shadcn/ui Building Next.js applications with TypeScript Creating complex layouts and data displays Quick Start For new projects, use the automated setup: For existing projects: What is shadcn/ui? shadcn/ui is not a traditional component library or npm package. Instead: It's a collection of reusable components that you can copy into your project Components are yours to customize - you own the code Built with Radix UI primitives for accessibility Styled with Tailwind CSS utilities Includes CLI tool for easy component installation Installation & Setup Initial Setup During setup, you'll configure: TypeScript or JavaScript Style (Default, New York, etc.) Base color theme CSS variables or Tailwind CSS classes Component installation path Installing Individual Components Manual Installation If you prefer manual setup: Project Configuration Required Dependencies TSConfig Configuration Tailwind Configuration CSS Variables (globals.css) Core Components Button Component Installation: Basic usage: Button variants: Button sizes: With loading state: Input & Form Fields Input Component Installation: Basic input: Input with label: Input with button: Forms with Validation Installation: This installs Re …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/shadcn-ui