skills.rest
zeeshan080
zeeshan080COMMUNITY
Explore all skills by this author →
Website𝕏@zero080GitHub

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
One-click install
npx skills add https://github.com/zeeshan080/ezee-erp --skill shadcn-ui-best-practices
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
saddam-eng-techsaddam-eng-tech

react-scaffold

Generate a React TypeScript component folder with tests and Storybook stories.

Community
Intermediate
miethemiethe

tailwind-utility-styling

Design Tailwind UI styling systems with mobile-first responsive rules and cva variants.

Community
Basic
pedronauckpedronauck
567

shadcn

Build and customize shadcn/ui components with design tokens and Radix UI accessibility.

Community
Intermediate