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
Decision gist · record as of 2026-07-28
shadcn-ui helps you set up and install accessible React components built on Radix UI and Tailwind CSS for your project. 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.
Use it when
- After running the init command, shadcn/ui lets you add individual components via `npx shadcn-ui@latest add [component-name]`.
- shadcn/ui integrates seamlessly with React Hook Form for form state management.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
shep-ai/shep/shadcn-ui · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up and install shadcn/ui components in a React or Next.js project”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
shadcn/ui provides production-ready React components you copy directly into your project rather than installing as a package. Built on Radix UI primitives and styled with Tailwind CSS, each component gives you full customization control and transparent implementation.
Frontend Patterns provides standardized approaches for constructing UI components, pages, authentication flows, and analytics integration across modern web frameworks. It covers server and client component distinctions, protected route implementation, form handling with validation, and accessibility requirements to maintain consistency throughout your project.
Shadcn provides copy-paste React components you own and control, built atop Radix UI for accessibility and styled with Tailwind CSS. Customize components freely while respecting design tokens for theme switching and preserving built-in accessibility features.
Shadcn Ui Expert helps you design and implement accessible React components using shadcn-ui, Tailwind CSS, and Radix UI. Get guidance on component selection, customization, and best practices across forms, layouts, dialogs, tables, and data displays. Works with Next.js, Vite, Remix, Astro, and other frameworks.
shadcn-ui guides you through initializing the component library, installing individual components via CLI, and building forms with validation. It covers button variants, dialogs, tables, toasts, and charts styled with Tailwind CSS and CSS variables for custom theming.
UI Design System enforces design consistency across React and TypeScript projects through reusable tokens, spacing grids, and component patterns. It covers color systems, typography scales, an 8pt spacing grid, shadcn/ui integration, and WCAG 2.1 AA accessibility standards to streamline component creation and layout building.
More skills Shadcn Ui (unlicensed) · Shadcn Skills (unlicensed) · generic-fullstack-design-system (MIT) · Shadcn (NOASSERTION) · ui-styling (MIT) · artifacts-builder (Apache-2.0) · web-artifacts-builder (Apache-2.0) · shadcn-inertia (MIT)