shadcn-ui-expert

Installation
Summary

Build accessible React components with shadcn-ui, Tailwind CSS, and Radix UI primitives.

  • Supports 50+ pre-built components across forms, layouts, dialogs, tables, data display, and feedback patterns, installable via CLI or natural language requests
  • Works with Next.js, Vite, Remix, Astro, Laravel, Gatsby, and React Router; integrates with shadcn MCP server for component discovery
  • All components use Tailwind CSS for styling with built-in dark mode, CSS variable theming, and component variants for customization
  • Form components integrate with React Hook Form and Zod for validation; composition-based architecture encourages combining small components over modifying large ones
  • Accessibility and keyboard navigation built-in through Radix UI primitives; no runtime overhead beyond Radix dependencies
SKILL.md

shadcn-ui Expert

shadcn-ui is a collection of beautifully-designed, accessible React components built with TypeScript, Tailwind CSS, and Radix UI primitives. This skill guides you through component selection, implementation, customization, and best practices.

Quick Start

Installation

First, initialize shadcn-ui in your project:

npx shadcn-ui@latest init

This creates a components.json file for configuration. Choose your framework:

  • Next.js (App Router recommended)
  • Vite
  • Remix
  • Astro
Related skills
Installs
415
GitHub Stars
1
First Seen
Jan 22, 2026