shadcn-ui-best-practices

Compose shadcn-ui primitives in src/components/shared without modifying base components.

Updated Aug 23, 2026

Search Tags:#accessibility #React #TypeScript #shadcn-ui #UI-patterns #component-composition

Ready to run

npx skills add https://github.com/zeeshan080/ezee-erp --skill shadcn-ui-best-practices

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shadcn-ui-best-practices
Source: https://github.com/zeeshan080/ezee-erp/tree/main/.claude/skills/shadcn-ui-best-practices
Command: npx skills add https://github.com/zeeshan080/ezee-erp --skill shadcn-ui-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies best practices for using shadcn-ui primitives without modifying base components.

Core Features & Use Cases

Best-practice rules: Do not modify components/ui directly; compose new components in src/components/shared.
Clear composition patterns: Examples of combining Card, CardHeader, CardTitle, etc., with CVA and cn utilities.
Accessibility-first: Using Radix primitives and asChild patterns to maintain accessibility.
Code organization: Guidance on file structure, exports, and path aliases.
Use cases: Ensure a design system remains maintainable when extending shadcn-ui primitives.

Quick Start

Read the guide and implement a small composed component in src/components/shared, such as a StatCard using Card primitives, following the patterns described.

Frequently Asked Questions about shadcn-ui-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I extend shadcn-ui components without modifying the base code?▼

To extend shadcn-ui components without modifying base code, compose new components in src/components/shared. This preserves the integrity of src/components/ui while allowing custom UI composition using Card and CVA utilities.

What is the best way to manage component variants in a React design system?▼

The best way to manage component variants in a React design system is by using CVA (Class Variance Authority) combined with the cn() utility. This approach enforces consistent styling patterns while maintaining TypeScript safety across composed components.

How do I maintain accessibility when composing Radix UI primitives in React?▼

To maintain accessibility when composing Radix UI primitives in React, use the asChild pattern to forward props and refs correctly. This ensures proper ARIA attribute propagation and keyboard navigation support across your composed component hierarchy.

Do I need forwardRef when building custom components with shadcn-ui?▼

Yes, you need forwardRef when building custom components with shadcn-ui. Wrapping your composed components with forwardRef ensures proper ref forwarding, allowing parent components to access underlying DOM nodes and maintain expected React component behavior.

How do I structure file exports for a maintainable shadcn-ui component library?▼

To structure file exports for a maintainable shadcn-ui component library, keep primitive components isolated in src/components/ui and use safe barrel exports for composed components. Establish clear path aliases to ensure predictable imports across your React project.