How to Use v0
Describe any UI and get a working React component — instantly.
🌐Browser — v0.app — sign in with GitHub or Googlev0 (by Vercel) is a browser tool that turns your text description into working React components and full web pages. Describe the interface you want — a dashboard, a landing page, a pricing table — and v0 generates clean, production-ready code using React and Tailwind CSS.
✓ Perfect for you if...
- ▸Building website UIs and landing pages without wrestling with CSS
- ▸Generating React components you can drop into an existing project
- ▸Designers who want to prototype UI ideas and get real working code back
Get set up in 5 steps
Follow these in order — each step takes about 1–2 minutes.
Go to v0.app
Open v0.app in your browser.
Sign up for free
Click "Sign in" and connect with your GitHub or Google account. The free plan includes credits to build with immediately.
Start a new project
Click "New Project" or type directly in the prompt box on the homepage.
Describe the UI you want
Write what you want to build as if briefing a designer: describe the layout, sections, colors, and content. v0 works best for UI — focus on what things look like and how they're structured.
Iterate in the chat
v0 shows a live preview. Click elements and describe changes in the chat: "make the hero text larger," "add a testimonials section below," "use a blue and white color scheme."
Your first prompt — paste this right now
v0 excels at pixel-perfect UI from a detailed description. This prompt describes every section, which gives v0 exactly what it needs to generate a complete, impressive result on the first pass.
Design a clean landing page for a simple SaaS product.
The page should have:
- A hero section: bold headline ("Track your habits. Build your life."), one-line subheadline, and two buttons: "Start for free" (filled, primary) and "See how it works" (outlined)
- A features section with 3 feature cards in a row, each with an icon, title, and 2-line description
- A pricing section with 2 plans: Free ($0/month, 3 features) and Pro ($12/month, 6 features), with a "Get started" button on each
- A simple footer with the product name and 4 links
Use a clean white background, soft gray for secondary text, and an indigo/violet accent color. Modern, minimal style like Linear or Vercel.3 tips that make a real difference
1. Describe design style like a design brief
Mention design references ("like Linear," "like Stripe," "minimal and clean") and specific colors. v0 understands design language well — treat it like briefing a designer, not a developer.
2. v0 builds the UI; pair it with Cursor for logic
v0 generates the interface, but it doesn't wire up backend logic. Once you have a UI you love, open the code in Cursor or copy the components into your project to add real functionality.
3. Deploy your page in one click
Click the "Deploy" button to publish your page instantly to a Vercel URL — no configuration needed. Great for sharing prototypes or validating a design before building the full product.
Ready to pick your first idea?
We've curated the best project ideas specifically matched to v0 — filtered by what actually works well with this tool.
Browse v0 project ideas →Also learn how to use