# shadcn/ui — Copy-Paste React Component Library

> Not a component library you install — components you copy into your project. Beautiful, accessible React components built on Radix UI and Tailwind CSS. Full ownership of code. 80,000+ stars.

## Install

Save in your project root:

## Quick Use

```bash
# Initialize in your Next.js/React project
npx shadcn@latest init

# Add components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add data-table
```

Components are copied to `components/ui/` — they are YOUR code now.

---

## Intro

shadcn/ui is a collection of beautifully designed, accessible React components that you copy into your project rather than installing as a dependency, with 80,000+ GitHub stars. Built on Radix UI primitives and styled with Tailwind CSS, every component is fully customizable because it lives in your codebase — not in node_modules. Used by Vercel, v0, and thousands of production apps. Best for React/Next.js developers who want beautiful UI without the constraints of traditional component libraries. Works with: React, Next.js, Remix, Astro. Setup time: under 2 minutes.

---

## Why Copy-Paste > Install

| Traditional Library | shadcn/ui |
|-------------------|-----------|
| `npm install component-lib` | `npx shadcn add button` |
| Styled via props/themes | Direct Tailwind CSS |
| Update = breaking changes | You control updates |
| Hidden source code | Full source in your project |
| Bundle everything | Only what you use |

### Available Components

#### Layout
Button, Card, Separator, Sheet, Tabs, Accordion, Collapsible

#### Forms
Input, Textarea, Select, Checkbox, Radio, Switch, Slider, DatePicker, Form (React Hook Form + Zod)

#### Data Display
Table, DataTable (with sorting, filtering, pagination), Badge, Avatar, HoverCard

#### Feedback
Alert, AlertDialog, Dialog, Drawer, Toast, Tooltip, Progress, Skeleton

#### Navigation
NavigationMenu, Breadcrumb, Pagination, Command (cmdk), Menubar, ContextMenu, DropdownMenu

### Theming

```css
/* globals.css — customize your theme */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}
```

### AI-Friendly
shadcn/ui is the default output of v0.dev and many AI coding tools:

```
AI prompt: "Create a settings page with tabs for profile, notifications, and billing"
AI output: Uses shadcn Tabs, Card, Input, Button — all standard components
```

### CLI Power

```bash
# Add multiple components at once
npx shadcn add button card input label

# Add a complex component with dependencies
npx shadcn add data-table
# Auto-installs: Table, Button, DropdownMenu, Input

# List available components
npx shadcn add --help
```

### Key Stats
- 80,000+ GitHub stars
- 50+ components
- Radix UI primitives (accessible)
- Tailwind CSS styling
- Used by Vercel, v0, 100K+ projects

### FAQ

**Q: What is shadcn/ui?**
A: A collection of React components you copy into your project — built on Radix UI and Tailwind CSS — giving you full ownership and customization.

**Q: Is shadcn/ui free?**
A: Yes, fully open-source under MIT license.

**Q: Is shadcn/ui a component library?**
A: No, it is NOT a library you install via npm. Components are copied into your project so you have full control.

---

## Source & Thanks

> Created by [shadcn](https://github.com/shadcn). Licensed under MIT.
>
> [ui](https://github.com/shadcn-ui/ui) — ⭐ 80,000+

Thanks for rethinking how component libraries should work.

---

<!-- ZH -->

## 快速使用

```bash
npx shadcn@latest init
npx shadcn@latest add button card dialog
```

组件被复制到你的项目中 — 完全由你掌控。

---

## 简介

shadcn/ui 是一个 React 组件合集，GitHub 80,000+ stars。不是安装的库，而是复制到项目中的组件。基于 Radix UI 和 Tailwind CSS，每个组件完全可自定义。被 Vercel、v0 等万级项目使用。适合想要美观 UI 又不受传统组件库限制的开发者。

---

## 来源与感谢

> Created by [shadcn](https://github.com/shadcn). Licensed under MIT.
>
> [ui](https://github.com/shadcn-ui/ui) — ⭐ 80,000+

---
Source: https://tokrepo.com/en/workflows/7b26fdf7-1b90-4b88-9c33-956baf7d68a5
Author: AI Open Source