shadcn

Organize governance for shadcn/ui components and presets across projects.

121k|9.8k|Updated Jan 4, 2023
One-click install
npx skills add https://github.com/shadcn-ui/ui --skill shadcn-shadcn-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/shadcn-ui/ui/tree/main/skills/shadcn
Command: npx skills add https://github.com/shadcn-ui/ui --skill shadcn-shadcn-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The SKILL provides governance and guidance for using the shadcn/ui design system within projects, consolidating best practices, setup instructions, and conformity rules into a single, discoverable skill.

Core Features & Use Cases

  • Centralized guidelines for working with shadcn/ui, presets, registries, and component documentation.
  • Enforces semantic tokens, component composition, and accessibility patterns across UI implementations.
  • Real-world scenarios include adding components to a Next.js or Vite project, switching presets, and validating code against design-system rules.

Quick Start

Initialize a shadcn/ui project using the recommended preset and apply the documented governance to start building consistent UI.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add shadcn/ui components to a Next.js or Vite project?

To add shadcn/ui components to a Next.js or Vite project, you initialize the project with a recommended preset and apply centralized guidelines to ensure consistent UI implementation. This governance enforces semantic tokens and accessibility patterns.

What is the best way to manage shadcn/ui presets and registries?

Managing shadcn/ui presets and registries involves consolidating best practices and setup instructions into a discoverable governance skill. This approach organizes component documentation and enforces conformity rules across all project implementations.

How does shadcn/ui enforce design system consistency across projects?

shadcn/ui enforces design system consistency by applying governance rules that validate code against design-system standards. It enforces semantic tokens, component composition, and accessibility patterns to maintain uniform UI implementations across projects.

Can I switch shadcn/ui presets in an existing project?

Yes, you can switch shadcn/ui presets in an existing project by applying the documented governance guidelines. This process ensures your UI components remain compliant with the new preset's semantic tokens and accessibility patterns.

Do I need shadcn/ui to validate code against design-system rules?

You need shadcn/ui governance to validate code against design-system rules because it provides centralized guidelines for component composition and accessibility patterns. This validation ensures your UI implementations conform to established design system standards.

When do I need shadcn/ui governance for my component documentation?

You need shadcn/ui governance when your workflows involve shadcn/ui, registries, presets, and component documentation. It provides a SKILL.md frontmatter with optional directories for scripts, references, and assets to extend behavior and satisfy functional requirements.