shadcn-ui
This skill guides you through initializing shadcn/ui, installing individual components, and configuring your project with Radix UI primitives and Tailwind CSS. Learn to build forms with validation, customize themes, and implement production-ready accessible components you own and control.
shadcn-ui helps you set up and install accessible React components built on Radix UI and Tailwind CSS for your project.
AI-generated summary based on this skill's SKILL.md
Install
shep-ai/shep/shadcn-ui · repository language: TypeScript
git clone https://github.com/shep-ai/shep
cp -r shep/.claude/skills/shadcn-ui ~/.claude/skills/shadcn-uinpx skillfed install shep-ai/shep/shadcn-uiFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up shadcn/ui in my React project?
shadcn/ui requires initializing your project with its CLI tool. Run `npx shadcn-ui@latest init` to configure Tailwind CSS, set up your component directory, and establish the base configuration. shadcn/ui will prompt you to choose your preferred styling approach and component path, then generate necessary configuration files for your React or Next.js project.
What's the shadcn/ui component library installation guide?
After running the init command, shadcn/ui lets you add individual components via `npx shadcn-ui@latest add [component-name]`. Each component is copied into your project as source code you own, built on Radix UI primitives and styled with Tailwind CSS. This approach gives you full control over component behavior and styling without managing a dependency.
How do I build forms with shadcn/ui and React Hook Form?
shadcn/ui integrates seamlessly with React Hook Form for form state management. Use shadcn/ui's Form component wrapper alongside React Hook Form's useForm hook, then add Zod for schema validation. This combination provides type-safe form handling with built-in error display, validation feedback, and accessible form fields.
How can I customize shadcn/ui components with CSS variables?
shadcn/ui uses CSS variables for theming, allowing you to customize colors, spacing, and other design tokens globally. Modify the variables in your CSS file or Tailwind config to change component appearance across your entire application. shadcn/ui also supports dark mode through CSS variable overrides, enabling seamless theme switching.
How do I create accessible dialogs with shadcn/ui?
shadcn/ui's Dialog component is built on Radix UI's Dialog primitive, providing built-in accessibility features like focus management, keyboard navigation, and ARIA attributes. Simply use the Dialog, DialogTrigger, and DialogContent components to create accessible modal dialogs that follow WAI-ARIA standards without additional configuration.
What's the best way to integrate shadcn/ui into Next.js with TypeScript?
shadcn/ui works seamlessly with Next.js App Router and TypeScript. Run the init command in your Next.js project, select TypeScript support, and configure your component directory. shadcn/ui automatically generates type-safe components that work with Next.js server and client components, enabling full-stack type safety in your application.
SKILL.md
rendered from the published skill — quoted content, verbatim
shadcn/ui Component Patterns
Overview
Expert guide for building accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS. This skill provides comprehensive patterns for implementing production-ready components with full accessibility support.
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
.claude/skills/shadcn-ui/SKILL.md
.claude/skills/shadcn-ui/references/learn.md
.claude/skills/shadcn-ui/references/official-ui-reference.md
.claude/skills/shadcn-ui/references/reference.md
.claude/skills/shadcn-ui/references/ui-reference.md