v0 by Vercel — from a prompt
to a React interface in seconds
v0 is an AI-powered UI builder from Vercel: you describe a component or screen in plain language and get real React + Tailwind + shadcn/ui code, ready to copy into your project. In this guide: how v0 works, when to choose it over Bolt.new and Lovable, and prompts that produce professional UI.
What is v0 and why is everyone talking about it?
v0 (pronounced "v-zero") is a product of Vercel — the company behind Next.js. The idea is simple: you describe in natural language what interface you want, and v0 generates React code with Tailwind CSS and shadcn/uicomponents. You see a live preview, request changes in the conversation, and when satisfied — you copy the code or open a full Next.js project.
The fundamental difference from no-code tools: v0 does not lock you in. The output is standard code that every React developer knows — you can paste it into VS Code, Cursor or Windsurf and continue by hand. That is why v0 has become the fast scaffolding tool of thousands of developers: it saves the boring first 30% of every screen.
v0 vs Bolt.new vs Lovable — which for what
The three tools sound similar, but they solve different problems. The key distinction: v0 focuses on UI and components, while Bolt.new and Lovable build a whole application including a Backend. Here is the comparison:
| Criterion | v0 by Vercel | Bolt.new | Lovable |
|---|---|---|---|
| Specialty | UI & components | Full-Stack in the browser | Full-Stack + Supabase |
| Output | React + shadcn/ui | Any stack (Vite, Next, Astro) | React + Supabase |
| Backend | Partial (Next API) | Yes, in the browser | Yes, managed |
| Best for | Devs who want UI fast | Fast full prototype | A no-code business app |
| IDE integration | Excellent (copy code) | Export to GitHub | Export to GitHub |
Want a nice component or screen to paste into an existing project? → v0. Want a Full-Stack prototype that runs instantly in the browser? → Bolt.new. Want a a business app with a DB and Auth without writing code? → Lovable. In practice, many developers use all of them — each for a different stage.
The v0 workflow — from prompt to code
Work in v0 is iterative: you start from a prompt, get a version, request improvements, and copy when satisfied. The four steps:
npx shadcn add command npx shadcn add that injects the component directly into the project. Option B: copy the code manually. Option C: open a full Next.js project on Vercel.To keep visual consistency, ask v0 at the start to define colors and typography, then in every following prompt write "use the same design system". This way all the screens look like one product and not a random collection of components.
v0 + shadcn/ui — why it is a winning combo
The secret behind the quality of v0's output is shadcn/ui — not a regular component library, but a set of components you copy into your project as open code you can edit. You own the code, there is no dependency on an external library's versions, and every component is fully customizable.
When v0 generates a component, it builds it from shadcn/ui primitives (Button, Dialog, Table, Card...). The meaning: the code you get already meets accessibility and responsiveness standards, and fits perfectly into any modern Next.js project.
Injecting a v0 component in one command
# v0 gives you a unique install command for each component
npx shadcn@latest add "https://v0.dev/chat/b/xxxxxxxx"
# the component + all its dependencies go into components/
# and are ready for immediate use in your Next.js projectPrompts for UI — how to describe an interface that comes out right
The difference between generic output and precise output is the detail. v0 works best when you give it context, structure and states — not just "build a form".
Initial prompt — describe structure, data and states
"Build me a dashboard"
"Build an analytics dashboard with: a row of 4 KPI cards at the top (revenue, users, conversion, percentage change); a line chart of revenue over the last 30 days; a table of the 10 latest transactions with columns for name, amount, status and date. Add loading states (skeletons) and an empty state. Dark mode, responsive, Inter font."
Principles for a good prompt
- Specify the data: which fields, which columns, what range of values. v0 builds realistic state around the data you described.
- Ask for states: loading, empty, error, hover. Real UI is not just the perfect state.
- Define the design: color scheme, font, radius, RTL/LTR, dark/light. The more you specify, the fewer iterations.
- Update specifically: "Move the save button to the top-left corner and make it primary" — not "change the button".
- Paste an image: Have a design from Figma or a competitor screenshot? Upload it and ask v0 to reproduce the layout.
What you can build in v0 in fifteen minutes
v0's limits and when to move to another tool
v0 is excellent for UI, but it does not solve everything. Knowing the limits helps you choose the right tool for each task:
| Limit | The right tool |
|---|---|
| Full Backend and DB logic | Lovable / Bolt.new |
| Deep editing of existing code | Cursor / Windsurf / Claude Code |
| Complex integrations (Stripe, Auth) | v0 for UI, an IDE for logic |
| A non-React stack | Bolt.new (Vue/Svelte/Astro) |
| Message quota on the free plan | Upgrade to Premium ($20/month) |
Build the UI layer in v0 (fast and beautiful), inject the components into a Next.js project, then continue in Cursor or Windsurf to connect data, logic and APIs. Finally — deploy to Vercel in one click. This is mature Vibe Coding: each tool for what it does best.