# v0 by Vercel — AI UI Component Generator

> AI-powered tool that generates production-ready React and Next.js UI components from text descriptions. Uses shadcn/ui and Tailwind CSS. Copy-paste or install via CLI. 8,000+ stars.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

1. Visit [v0.dev](https://v0.dev)
2. Describe what you want: "A pricing page with 3 tiers, dark mode, and a toggle for monthly/annual billing"
3. Copy the generated code or install via CLI:

```bash
npx v0 add pricing-page
```

The component is added to your project with all dependencies resolved.

---

## Intro

v0 by Vercel is an AI-powered tool that generates production-ready React and Next.js UI components from natural language descriptions with 8,000+ GitHub stars. It outputs clean code using shadcn/ui components and Tailwind CSS — not mockups, but real, copy-paste-ready code that follows modern frontend best practices. Iterate by describing changes in plain English. Best for frontend developers who want to accelerate UI development without sacrificing code quality. Works with: React, Next.js, shadcn/ui, Tailwind CSS. Setup time: instant (web-based).

---

## How It Works

### Describe → Generate → Iterate

```
Prompt: "A dashboard with a sidebar navigation, header with user avatar,
         and a main content area showing 4 metric cards"

v0 generates:
- Complete React component tree
- shadcn/ui Card, Avatar, NavigationMenu components
- Tailwind CSS styling
- Responsive layout
- Dark mode support
```

### Code Quality
Generated code follows best practices:
- TypeScript with proper types
- Server Components by default
- Accessible (ARIA attributes)
- Responsive (mobile-first)
- Clean component structure

### CLI Integration

```bash
# Add a component directly to your project
npx v0 add dashboard-layout

# Files created:
# components/dashboard-layout.tsx
# components/ui/card.tsx (if not exists)
# components/ui/avatar.tsx (if not exists)
```

### Iteration by Chat
Refine generated components conversationally:

```
"Make the sidebar collapsible"
"Add a search bar to the header"
"Change the color scheme to blue"
"Add loading skeletons to the metric cards"
```

### Component Library
v0 uses shadcn/ui — fully customizable, not a black box:
- Button, Card, Dialog, Table, Form
- Chart, Calendar, Command palette
- All components are in your codebase (not node_modules)

### Popular Use Cases

| Prompt | What You Get |
|--------|-------------|
| "Login form with OAuth" | Email/password + Google/GitHub buttons |
| "Data table with sorting" | Full DataTable with pagination and filters |
| "E-commerce product grid" | Responsive grid with images, prices, ratings |
| "Blog post layout" | Article with TOC, author card, related posts |
| "Settings page" | Tabs for profile, notifications, billing |

### Key Stats
- 8,000+ GitHub stars
- shadcn/ui + Tailwind CSS output
- TypeScript + React/Next.js
- CLI for direct project integration
- Iterative refinement via chat

### FAQ

**Q: What is v0?**
A: v0 is Vercel's AI tool that generates production-ready React/Next.js UI components from text descriptions, using shadcn/ui and Tailwind CSS.

**Q: Is v0 free?**
A: Free tier with 10 generations/day. Pro plan for unlimited usage.

**Q: Can I customize the generated code?**
A: Yes, the code is fully yours — standard React components with shadcn/ui, editable like any other code.

---

## Source & Thanks

> Created by [Vercel](https://github.com/vercel). Licensed under proprietary (generated code is yours).
>
> [v0](https://v0.dev) — ⭐ 8,000+

Thanks to Vercel for making UI development feel like a conversation.

---

<!-- ZH -->

## 快速使用

1. 访问 [v0.dev](https://v0.dev)
2. 描述你想要的: "一个三列定价页面，带月/年切换"
3. 复制代码或用 CLI 安装: `npx v0 add pricing-page`

---

## 简介

v0 是 Vercel 推出的 AI UI 生成工具，GitHub 8,000+ stars。从自然语言描述生成生产级 React/Next.js 组件，使用 shadcn/ui 和 Tailwind CSS。输出的是真实可用代码，不是原型图。适合想加速 UI 开发而不牺牲代码质量的前端开发者。

---

## 来源与感谢

> Created by [Vercel](https://github.com/vercel).
>
> [v0](https://v0.dev) — ⭐ 8,000+

---
Source: https://tokrepo.com/en/workflows/4acf5c24-7eb6-44c9-b4e5-ccd1b5baf460
Author: Skill Factory