What is v0 by Vercel?

v0 by Vercel generates React components and full page UIs from text descriptions. Output is clean Tailwind + shadcn/ui code you can drop directly into your Next.js project. The fastest way to go from idea to working UI — no design skills needed.

Best prompting structure

Role
Describe the UI component or page
Context
Include: style, colours, content, interactivity
Task
Generate a [component type] with [specific features]
Format
Mention the tech stack if needed (Next.js, Tailwind, etc.)
// Example prompt
Create a pricing page for a SaaS product with 3 tiers: Free, Pro (₹999/month), and Enterprise. Include feature comparison checklist, a "Most Popular" badge on Pro, and a toggle for monthly/annual billing. Use a clean minimal style with a teal accent colour.

How to use v0 by Vercel — step by step

1

Go to v0.dev — sign in with GitHub or Google

2

Describe your UI in plain English — be specific about layout and features

3

v0 generates the component with live preview

4

Click "Edit" to refine with follow-up prompts

5

Click "Add to codebase" to install directly into your Next.js project

Pro tips

→

Reference existing sites: "like the Stripe pricing page but simpler"

→

Ask for dark mode variants or mobile-responsive versions specifically

→

Use the "Blocks" library for pre-built sections you can customise

→

v0 code works directly in Next.js + Tailwind — zero cleanup needed