v0 by Vercel Guide 2025: Generate UI Components with AI
v0 is Vercel's AI UI generator — describe a component in plain English and get production-ready React code with shadcn/ui and Tailwind. Free 200 credits/month, live preview, and direct integration with Next.js projects.
1. What is v0 by Vercel?
v0 is Vercel's AI UI generator. You describe a UI component in plain English, and v0 generates production-ready React code using shadcn/ui and Tailwind CSS. It's not a full app builder — it generates individual components that you copy into your existing project.
v0 is designed for developers who want to skip the boilerplate phase. Instead of building a pricing card, data table, or login form from scratch, you describe what you want and get working code to refine.
2. Free tier: 200 credits per month
v0 gives you 200 credits per month on the free tier. One message — whether a new generation or a chat iteration — costs 1 credit. Credits reset monthly.
3. Generating your first component
Go to v0.dev — sign in with Vercel or GitHub, no setup needed. Type your component description in the prompt field and click send.
"A pricing card component with 3 tiers (Free, Pro, Enterprise), monthly/annual billing toggle, feature list with checkmarks, and a highlighted recommended Pro tier"
"A data table with search, sorting, pagination, and row selection. Use mock user data with name, email, role, and status columns"
"A sidebar navigation with icons, collapsible sub-menus, active state highlighting, and a dark/light mode toggle at the bottom"
- Live preview of the component in the right panel
- Code tab showing the full React + shadcn/ui component
- List of shadcn components used (so you know what to install)
- Often 2-3 design variations to choose from
4. Iteration workflow: chat to refine
Once v0 generates a component, you refine it through chat. Each message costs 1 credit but targets only the change you specify — v0 updates the component intelligently rather than regenerating from scratch.
You can also fork a block — click "Fork" to create a copy of the current state and explore a different direction without losing the previous version.
5. Integrating v0 output into Next.js
v0 components use shadcn/ui. If your Next.js project doesn't have shadcn/ui yet, initialize it first. Then install the specific components v0 used.
npx shadcn@latest init
npx shadcn@latest add button card input
Create a new file in your components/ folder (e.g., components/PricingCard.tsx), paste the v0 code, and import it anywhere in your project. No other changes needed.
6. v0 vs Bolt.new vs Lovable
These three tools are often compared, but they serve very different purposes:
| Tool | Output | Backend | Free tier | Best for |
|---|---|---|---|---|
| v0 | UI components | ✗ | 200 credits/mo | Devs building UI fast |
| Bolt.new | Full app (any framework) | ✓ (in-browser) | 150k tokens/mo | Prototypes, demos |
| Lovable | Full-stack app | ✓ (Supabase) | 5 msgs/day | Non-devs launching apps |
Choose v0 if you're a developer who wants UI component code to copy into your own project. You handle the backend, routing, and deployment.
Choose Lovable if you want a complete app with auth, database, and deployment included — no developer skills needed.
7. Advanced: screenshots and Claude 3.5 inside v0
Upload a screenshot of any UI (competitor's product, design mockup, Dribbble shot) directly into v0's prompt. v0 will analyze the screenshot and generate a React implementation that matches the layout, colors, and structure.
Useful for: rapid prototyping from Figma exports, recreating UI from design inspiration, or matching an existing app's style without starting from scratch.
v0 uses Claude 3.5 Sonnet as its underlying model for understanding your prompts and generating component code. This means v0 can handle nuanced, multi-step component requirements and understands React patterns deeply.
You can describe complex behavior in plain English: "When the user clicks 'Add to cart', show a confirmation toast, disable the button for 2 seconds, then re-enable it" — v0 will implement the state management and UX correctly.
Monitor Vercel AI status
v0 is powered by Vercel's infrastructure — track Vercel and Claude uptime at prismix.dev so you know immediately if v0 is having issues.
FAQ
Is v0 by Vercel free?
Yes. v0 has a free tier with 200 credits per month — 1 message (generation or iteration) costs 1 credit. The Premium plan at $20/mo gives unlimited fast generations. Credits reset monthly.
What frameworks does v0 support?
v0 generates React components using shadcn/ui and Tailwind CSS. The output is designed for Next.js projects but works in any React setup. v0 does not generate Vue, Angular, or vanilla HTML.
How do I use v0 output in my project?
Install shadcn/ui with npx shadcn@latest init, then install the components v0 used (e.g., npx shadcn@latest add button card). Copy the v0 component code into your /components folder — it works immediately with Tailwind CSS configured.
How is v0 different from Bolt.new and Lovable?
v0 generates individual UI components (React + shadcn/ui + Tailwind) — not full apps. Bolt.new builds full apps in a browser environment. Lovable builds full-stack apps with Supabase backend, auth, and deployment. Use v0 for component code; use Bolt or Lovable for a complete app.