using-shadcn-ui_skill

Overview

This skill shows how to adopt shadcn/ui and shadcnblocks.com to build accessible, Tailwind-driven React UI components and production-ready page sections. It focuses on copying components into your codebase so you own and customize every component without adding a locked dependency. Use it to accelerate design-system work with accessible primitives and 829 ready-to-use blocks.

How this skill works

It walks through initializing shadcn/ui, adding individual components (button, dialog, form, etc.), and placing those files under components/ui/ in your project. It also explains using shadcnblocks.com to copy complete page sections (Hero, Pricing, Testimonials) into your app and how to install any missing primitives. Guidance covers theming via CSS variables, variant patterns, and editing component files directly to extend behavior.

When to use it

• Building a React app with Tailwind CSS and wanting accessible primitives
• Creating or extending a design system where you need full ownership of components
• Speeding up UI work with copy-paste production-ready blocks from shadcnblocks.com
• Implementing common UI patterns: forms, dialogs, navigation, tables, toasts
• When you want customizable components without relying on a packaged UI library

Best practices

• Run npx shadcn@latest init early to scaffold styles and CSS variable setup
• Add only the components you need with npx shadcn@latest add to keep code minimal
• Keep components in components/ui/ and edit them directly for project-specific variants
• Use CSS variables for colors and Tailwind config integration for consistent theming
• Combine react-hook-form and zod with shadcn form primitives for accessible validation

Example use cases

• Copy a Hero block from shadcnblocks.com, paste into app/components/hero.tsx, then npx shadcn@latest add button to wire up CTAs
• Build a LoginForm using shadcn form primitives, react-hook-form, and zod for validation
• Create a ConfirmDialog using shadcn dialog primitives and destructive button variant
• Assemble a Pricing section using Card, Badge, and Button primitives from components/ui/
• Add a Toast notification flow by installing the toast primitive and using a use-toast hook