# Build React UIs with shadcn components

Developers struggle to maintain consistent, accessible UI components across React projects. This skill provides CLI commands, component composition patterns, and styling rules for building professional UIs with the shadcn/ui component library.

## Install

```bash
npx skillstore add shadcn/shadcn
```

## Metadata

- - Slug: shadcn-shadcn
- - Version: 1.0.0
- - Author: shadcn
- - GitHub username: shadcn
- - License: MIT
- - Repository: https://github.com/shadcn/ui/tree/main/skills/shadcn/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: safe
- - Risk factors: external\_commands, network, filesystem
- - Quality score: 77
- - Quality tier: bronze
- - Public page: https://skillstore.pages.dev/skills/shadcn-shadcn
- - Manifest: https://skillstore.pages.dev/api/skills/shadcn-shadcn/manifest

## Capabilities

- Add, search, and manage shadcn/ui components via CLI
- Apply component composition patterns \(Card, Dialog, Tabs, Forms\)
- Debug and fix common shadcn/ui implementation issues
- Style components using semantic Tailwind tokens
- Initialize new projects with presets and templates
- Access component documentation and usage examples

## Use Cases

- Add components to React project: Use CLI to add button, form, dialog, and other UI components to a Next.js or Vite project
- Debug styling and composition issues: Fix common issues with z-index, variants, semantic colors, and component nesting
- Apply best-practice component patterns: Follow official composition rules for forms, dialogs, tabs, and other complex components

## Prompt Templates

### Add a new component

```
Add the button and card components to my project using shadcn CLI. Show me the correct composition pattern for a settings card with a title, description, and action button.
```

### Debug a component issue

```
Debug and fix a dialog that is not appearing above other elements. The z-index seems wrong on mobile.
```

### Search for a component

```
Search the shadcn registry for a table component and add it with the correct installation command.
```

### Style with semantic tokens

```
Convert this button from hardcoded bg-blue-500 to use semantic tokens from the shadcn theme. Use the correct variant pattern.
```

## Limitations

- Requires existing shadcn/ui project or init step first
- Does not create new component designs from scratch
- No runtime component library \(source code only\)
- Limited to CLI-based workflows described in documentation

## Best Practices

- Always use project package runner \(npx, pnpm dlx, bunx\) based on project packageManager
- Prefer component composition over custom markup \(use Alert, Empty, Badge instead of styled divs\)
- Use semantic color tokens \(bg-primary, text-muted-foreground\) instead of raw Tailwind colors

## Anti Patterns

- Do not override component colors with raw Tailwind classes - use variant prop instead
- Do not use space-x-\* or space-y-\* - use flex with gap-\* for layout
- Do not invent CLI flags not documented in the official reference

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-03-13T08:19:37.961\+00:00
- - Summary: Audit complete. Static findings are false positives: backticks are markdown code formatting, URLs are documentation links, and cryptographic warnings are triggered by file paths. This is a legitimate UI component library skill with no actual security risks.

## Stats

- - Views: 562
- - Downloads: 5
- - Favorites: 0
- - Popularity score: 0