shadcn-ui_skill

Overview

This skill delivers a complete guide and patterns for integrating shadcn/ui into React projects. It covers installation, project configuration, accessible component implementations, and Tailwind CSS theming so teams can adopt production-ready UI primitives quickly. Use it to scaffold components, wire up forms with React Hook Form and Zod, and apply accessible Radix behaviors out of the box.

How this skill works

The skill explains how to initialize shadcn/ui with the CLI, add individual components, and copy component code into your project so you own and customize it. It details required dependencies, TypeScript and Tailwind configuration, and CSS variable theming. Example patterns show concrete implementations for buttons, inputs, dialogs, selects, tables, toasts, and validated forms using React Hook Form + Zod.

When to use it

• Starting a new Next.js or React project that needs accessible, composable UI primitives
• Adding shadcn/ui components quickly via the npx shadcn CLI
• Building forms with React Hook Form and Zod validation schemas
• Customizing theme colors, dark mode, and Tailwind utility tokens
• Implementing complex UI patterns (dialogs, sheets, menubars, tables) with Radix accessibility

Best practices

• Run npx shadcn@latest init for consistent project scaffolding and path aliases
• Install only the Radix packages and utilities a component requires to keep deps minimal
• Copy components into your src/components/ui folder so you can modify styles and behavior
• Use CSS variables and Tailwind config to centralize theming and support dark mode
• Test keyboard navigation and ARIA attributes for dialogs, menus, and form controls

Example use cases

• Scaffold a design system by copying shadcn/ui components and tuning variants and tokens
• Create a login or profile form with client-side Zod validation and inline error messages
• Add a modal-based workflow using the Dialog component with focus management
• Build a data table with accessible headers, pagination controls, and action menus
• Implement toast notifications and transient UI feedback wired to form submissions