shadcn-ui_skill

Overview

This skill guides implementing shadcn/ui — a set of accessible, beautifully designed UI components built with Radix UI and Tailwind CSS. It explains the CLI-driven distribution model, setup steps, and how to add and customize components in React-based apps. The goal is to help you ship consistent, themeable UI with full ownership of component code.

How this skill works

shadcn/ui delivers components as copyable source files rather than closed packages: a CLI copies component files into your project (components/ui/) and installs required dependencies. Components are built from Radix primitives, styled with Tailwind, and typed with TypeScript, making them composable, themeable, and ready for direct modification. The skill covers initial CLI or manual setup, Tailwind configuration, utility helpers, and adding individual components or groups via the CLI.

When to use it

• Building UIs in React frameworks (Next.js, Vite, Remix, Astro).
• Adding accessible, pre-built components without locking into a package.
• Implementing a Tailwind-based design system with customizable defaults.
• Setting up complex forms with react-hook-form and Zod validation.
• Adding data-heavy patterns like tables, charts, or command palettes.

Best practices

• Use the CLI (npx shadcn@latest) to scaffold framework-appropriate code and avoid manual errors.
• Keep components in components/ui/ and treat them as part of your source — modify freely to match your design system.
• Configure Tailwind content paths and darkMode early to avoid styling gaps.
• Provide a small cn utility (clsx + twMerge) for consistent class composition.
• Add form validation with react-hook-form + zod to keep form logic predictable and typed.

Example use cases

• Scaffold a design system for a Next.js app, then tweak component tokens and theme variables.
• Rapidly assemble a settings page with Tabs, Forms, Selects, and Toast feedback.
• Add a data table with sorting and filtering using the provided data-table component.
• Implement a reusable Date Picker and Popover for scheduling interfaces.
• Ship a dark-mode toggle using next-themes and shadcn/ui theme-aware components.