shadcn
This skill provides a prioritized collection of 58 best practices for shadcn/ui development, organized across 10 categories from critical setup and component architecture to performance and state management. Use it when configuring projects, building components with Radix primitives and Tailwind, implementing forms with React Hook Form, or ensuring accessibility compliance.
shadcn provides 58 community-maintained best practices for building accessible, performant shadcn/ui components.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-24
shadcn provides 58 community-maintained best practices for building accessible, performant shadcn/ui components. This skill provides a prioritized collection of 58 best practices for shadcn/ui development, organized across 10 categories from critical setup and component architecture to performance and state management. Use it when configuring projects, building components with Radix primitives and Tailwind, implementing forms with React Hook Form, or ensuring accessibility compliance.
Use it when
- shadcn accessibility compliance relies on Radix primitives as the foundation, which provide semantic HTML and ARIA attributes.
- shadcn form validation patterns integrate React Hook Form with Zod for schema validation.
Verify before relying
Read SKILL.md below before installing (60 files). Open directory: indexed for reading, not audited.
Similar skills
Install
pproenca/dot-skills/shadcn · repository language: Shell
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
What are shadcn best practices for building components?
shadcn provides 58 prioritized best practices organized across 10 categories. Key practices include leveraging Radix primitives for accessibility foundations, using Tailwind for styling, implementing proper component architecture with compound components, managing focus and keyboard navigation, and following code review checklists. The skill emphasizes critical setup and configuration first, then progresses through component patterns, forms with React Hook Form, theming with CSS variables, and performance optimization strategies.
How do you ensure accessibility compliance in shadcn/ui projects?
shadcn accessibility compliance relies on Radix primitives as the foundation, which provide semantic HTML and ARIA attributes. Best practices include proper focus management and keyboard navigation implementation, testing with accessibility tools, following WCAG guidelines, and using semantic components. The skill covers accessibility guidelines as a dedicated practice area, ensuring components meet compliance standards while maintaining usability for all users.
How should shadcn/ui form validation with React Hook Form be implemented?
shadcn form validation patterns integrate React Hook Form with Zod for schema validation. Best practices include defining schemas upfront, leveraging shadcn form components for consistent UI, handling validation errors gracefully, and managing form state efficiently. The skill provides form patterns and validation strategies as part of its 58 practices, helping you build robust, user-friendly forms with proper error handling and accessibility.
What does shadcn theming and dark mode support involve?
shadcn theming uses CSS variables for flexible, maintainable color management. Dark mode support is configured through Tailwind's dark mode utilities and CSS variable overrides. Best practices include centralizing theme definitions, using semantic color naming, testing both light and dark modes, and ensuring sufficient contrast. The skill covers theming configuration as a dedicated category, enabling consistent brand application across projects.
How can shadcn component architecture be optimized for performance?
shadcn performance optimization includes lazy loading components, efficient data display patterns with TanStack data tables, proper state management to avoid unnecessary re-renders, and code-splitting strategies. Best practices cover compound component patterns that reduce prop drilling, memoization where appropriate, and monitoring bundle size. The skill addresses performance as a category, helping you build scalable applications that maintain responsiveness.
What is shadcn's approach to component styling with Tailwind?
shadcn styling leverages Tailwind CSS for utility-first design, combining it with CSS variables for theming flexibility. Best practices include maintaining consistent spacing and sizing scales, using Tailwind's responsive utilities for mobile-first design, and organizing styles through component composition. The skill covers styling patterns and responsive design strategies, ensuring components work seamlessly across all device sizes while remaining maintainable.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
shadcn/ui Community Best Practices
Comprehensive best practices guide for shadcn/ui applications, maintained by the shadcn/ui community. Contains 58 rules across 10 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when: - Installing and configuring shadcn/ui in a project - Writing new shadcn/ui components or composing primitives - Implementing forms with React Hook Form and Zod validation - Building data tables or handling large dataset displays - Customizing themes or adding dark mode support - Reviewing code for accessibility compliance
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | CLI & Project Setup |
(truncated - see the full file via the links below)
File tree — 15 files
skills/.curated/shadcn/AGENTS.md
skills/.curated/shadcn/README.md
skills/.curated/shadcn/SKILL.md
skills/.curated/shadcn/metadata.json
skills/.curated/shadcn/references/_sections.md
skills/.curated/shadcn/references/ally-aria-invalid-errors.md
skills/.curated/shadcn/references/ally-checkbox-label-association.md
skills/.curated/shadcn/references/ally-dialog-title-required.md
skills/.curated/shadcn/references/ally-ensure-color-contrast.md
skills/.curated/shadcn/references/ally-focus-visible-styles.md
skills/.curated/shadcn/references/ally-form-field-labels.md
skills/.curated/shadcn/references/ally-maintain-focus-management.md
skills/.curated/shadcn/references/ally-preserve-aria-attributes.md
skills/.curated/shadcn/references/ally-preserve-keyboard-navigation.md
skills/.curated/shadcn/references/ally-provide-sr-only-labels.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 › “Learn best practices for building shadcn/ui components”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Shadcn guides you through 58 prioritized rules spanning component setup, architecture, accessibility, styling, forms, and data display. It activates when building with shadcn/ui, Radix primitives, Tailwind, React Hook Form, or customizing themes—helping you maintain patterns across CLI configuration, component composition, and keyboard navigation.
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 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.
Master shadcn-ui's approach to building reusable components with CVA for variant management, Radix for accessible primitives, and Tailwind for styling. Covers CLI setup, the cn() utility, polymorphic rendering via asChild, compound component structure, and modern CSS selectors like has() for conditional layouts.
UI Components provides 22 rules across 7 categories for constructing accessible component libraries with shadcn/ui and Radix Primitives. It covers CVA variants, OKLCH theming, form integration with React Hook Form and Zod, Radix composition patterns, and design system foundations including spacing scales and typography.
This skill audits shadcn/ui and Radix-based React components against best practices for variant-driven styling, accessible state handling, and composable component architecture. It checks CVA pattern separation, asChild slot integration, focus and ARIA attributes, and data-slot targeting across multi-part components.