shadcn-ui
Complete guide to building accessible React components with shadcn/ui, Radix UI, and Tailwind CSS.
What it does
- Components are copied into your project — you own and customize the code
- Built on Radix UI primitives for full accessibility
- Styled with Tailwind CSS and CSS variables for theming
- CLI-based installation: npx shadcn@latest add <component>
- "Set up shadcn/ui", "initialize shadcn", "add shadcn components"
- "Install button/input/form/dialog/card/select/toast/table/chart"
- "React Hook Form", "Zod validation", "form with validation"
Requirements & configuration
- Client Components: Most interactive components require "use client" directive
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
Complete guide to building accessible React components with shadcn/ui, Radix UI, and Tailwind CSS.
Source
Repository: https://github.com/giuseppe-trisciuoglio/developer-kit
shadcn-ui FAQ
What does the shadcn-ui skill do?
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts. Components are copied into your project — you own and customize the code Built on Radix UI primitives for full accessibility
What does shadcn-ui require?
Client Components: Most interactive components require "use client" directive
How do I install shadcn-ui?
Run: npx -y skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill shadcn-ui --agent claude-code — the source lives at github.com/giuseppe-trisciuoglio/developer-kit.
Maintain shadcn-ui?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/giuseppe-trisciuoglio-developer-kit-shadcn-ui?ref=badge) npx agentictools info skills/giuseppe-trisciuoglio-developer-kit-shadcn-ui The second line is the CLI lookup for this page — handy in READMEs and docs.
Related skills
vueuse-functions Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
vue-router-best-practices Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
baseline-ui Enforces design and interaction constraints to prevent common UI anti-patterns in Tailwind CSS projects.
pinia Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actio…
vue-best-practices MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach.…
react-native-best-practices Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Ap…