Individual skill

shadcn

shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.

skills/.curated/shadcn/SKILL.md

Read pinned source

Source commit cf93c57cac89d6fc3e4194686000411567f5caf3

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Not checked yet
Last checked: Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 222
Repository last updated: Aug 15, 2026
License: MIT

Observed agent integration: codex

engineering Derived category
design Derived category
writing Derived category
data Derived category
design-interface Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

AGENTS.mddoc · 12,180 bytes
README.mddoc · 4,640 bytes
SKILL.mdcore · 10,003 bytes
assets/templates/_template.mddoc · 1,015 bytes
metadata.jsonasset · 963 bytes
references/_sections.mddoc · 2,147 bytes
references/ally-aria-invalid-errors.mddoc · 1,618 bytes
references/ally-checkbox-label-association.mddoc · 1,502 bytes
references/ally-dialog-title-required.mddoc · 1,831 bytes
references/ally-ensure-color-contrast.mddoc · 1,696 bytes
references/ally-focus-visible-styles.mddoc · 1,521 bytes
references/ally-form-field-labels.mddoc · 1,718 bytes
references/ally-maintain-focus-management.mddoc · 2,057 bytes
references/ally-preserve-aria-attributes.mddoc · 2,275 bytes
references/ally-preserve-keyboard-navigation.mddoc · 2,017 bytes
references/ally-provide-sr-only-labels.mddoc · 1,877 bytes
references/arch-extend-variants-with-cva.mddoc · 1,982 bytes
references/arch-forward-refs-for-composable-components.mddoc · 2,068 bytes
references/arch-isolate-component-variants.mddoc · 2,228 bytes
references/arch-preserve-radix-primitive-structure.mddoc · 1,653 bytes
references/arch-use-asChild-for-custom-triggers.mddoc · 1,815 bytes
references/arch-use-cn-for-class-merging.mddoc · 1,713 bytes
references/comp-combine-command-with-popover.mddoc · 3,142 bytes
references/comp-compose-with-compound-components.mddoc · 3,065 bytes
references/comp-create-reusable-form-fields.mddoc · 3,902 bytes
references/comp-nest-dialogs-correctly.mddoc · 3,208 bytes
references/comp-use-drawer-for-mobile-modals.mddoc · 3,387 bytes
references/comp-use-slot-pattern-for-flexibility.mddoc · 3,243 bytes
references/data-empty-states-with-guidance.mddoc · 2,927 bytes
references/data-paginate-server-side.mddoc · 2,910 bytes
references/data-use-skeleton-loading-states.mddoc · 2,664 bytes
references/data-use-tanstack-table-for-complex-tables.mddoc · 3,167 bytes
references/data-virtualize-large-lists.mddoc · 2,425 bytes
references/form-handle-async-validation.mddoc · 2,755 bytes
references/form-reset-form-state-correctly.mddoc · 2,307 bytes
references/form-show-validation-errors-correctly.mddoc · 1,756 bytes
references/form-use-react-hook-form-integration.mddoc · 2,989 bytes
references/form-use-zod-for-schema-validation.mddoc · 2,525 bytes
references/layout-breadcrumb-navigation.mddoc · 2,061 bytes
references/layout-sheet-mobile-nav.mddoc · 2,078 bytes
references/layout-sidebar-collapsible.mddoc · 1,738 bytes
references/layout-sidebar-groups.mddoc · 3,154 bytes
references/layout-sidebar-provider.mddoc · 1,655 bytes
references/perf-avoid-unnecessary-rerenders-in-forms.mddoc · 2,618 bytes
references/perf-debounce-search-inputs.mddoc · 2,264 bytes
references/perf-lazy-load-heavy-components.mddoc · 2,545 bytes
references/perf-memoize-expensive-renders.mddoc · 2,421 bytes
references/perf-optimize-icon-imports.mddoc · 1,897 bytes
references/setup-cn-utility.mddoc · 1,195 bytes
references/setup-components-json.mddoc · 1,500 bytes
references/setup-css-variables-theme.mddoc · 1,346 bytes
references/setup-path-aliases.mddoc · 1,186 bytes
references/setup-rsc-configuration.mddoc · 1,395 bytes
references/setup-use-cli-not-copy.mddoc · 1,205 bytes
references/state-colocate-state-with-components.mddoc · 2,803 bytes
references/state-lift-state-to-appropriate-level.mddoc · 2,622 bytes
references/state-prefer-uncontrolled-for-simple-inputs.mddoc · 2,520 bytes
references/state-use-controlled-dialog-state.mddoc · 3,330 bytes
references/style-avoid-important-overrides.mddoc · 1,773 bytes
references/style-consistent-spacing-scale.mddoc · 1,912 bytes
references/style-dark-mode-support.mddoc · 2,221 bytes
references/style-responsive-design-patterns.mddoc · 2,593 bytes
references/style-use-css-variables-for-theming.mddoc · 1,764 bytes
references/style-use-tailwind-theme-extend.mddoc · 1,985 bytes

Read excerpt


# 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