# Shadcnui

> shadcn/ui copy-paste React components. Use for modern React UI.

- Skill: `g1joshi/shadcnui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add g1joshi/shadcnui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/g1joshi/shadcnui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: G1Joshi (https://skillmd.com/u/g1joshi)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/g1joshi/shadcnui

---


# shadcn/ui

shadcn/ui is not a component library; it's a **collection of reusable components** that you copy and paste into your apps. Built on Radix UI and Tailwind.

## When to Use

- **Ownership**: You want full control over the component code.
- **Next.js**: The de facto standard for modern Next.js apps.
- **Modern**: The "Vercel Aesthetic".

## Core Concepts

### Copy/Paste

`npx shadcn-ui@latest add button`. This adds `components/ui/button.tsx` to YOUR project.

### Radix UI

The headless, accessible primitives (Dialog, Tooltip) that power the interactions.

### `cn` Utility

A helper to merge Tailwind classes conditionally (`clsx` + `tailwind-merge`).

## Best Practices (2025)

**Do**:

- **Customize**: Edit the component code! That's the point.
- **Use `lucide-react`**: The standard icon set.
- **Use Blocks**: Copy larger blocks (Login Forms, Dashboards) from the registry.

**Don't**:

- **Don't treat it like MUI**: There is no npm package to update. You own the code.

## References

- [shadcn/ui Documentation](https://ui.shadcn.com/)