How to Use v0 — Turn a Prompt or Design Into React UI
A practical guide to generating clean React and Next.js code from text or Figma and shipping it on Vercel — with the full admission that this is a frontend-only tool, not an app generator.
Beginner7 min read
What you'll be able to do by the end
- Understand that v0 is frontend-only by design — it generates clean React and Next.js code, but the database and backend logic stay your responsibility
- Start either with a text description of the component or page you want, or upload a design image or Figma frame it converts into code
- Refine results two ways: through conversation, or visually via Design Mode instead of typing out every small tweak
- Push the code into an existing Vercel project in one click, or export via GitHub to continue in a real editor
- Know the free plan's exact limits before relying on it: $5 of monthly credit with a hard cap of 7 messages per day
Before you start
- An actual React or Next.js project, or the intention to start one on Vercel
- A clear idea of the component or page you want, or a finished Figma design if you'll use the image route
v0 is a tool from Vercel — the same company hosting Next.js and React projects — that turns a text description or an uploaded design (say, a Figma screenshot) into real, deployable frontend code. The core difference from ‘description-to-full-app’ tools like Lovable: v0 specializes in the frontend alone, and the code it emits is clean and directly compatible with a real Vercel project.
That makes it a niche instrument: not for everyone who wants a full app from an idea, but for developers and designers genuinely working in React or Next.js who want to speed up the first build — whether by describing a new component or converting a Figma design into code instead of hand-building from scratch.
This guide focuses on practical use from prompt or design upload through final export or direct publishing, flagging what most first-time users get wrong: v0 does not build complete apps, and its free plan is narrower than expected.
The steps
The steps run from the fit decision through final publishing and the free plan’s limits. If you’re sure your project runs on React or Next.js, jump straight to describing or uploading.
Steps
Step 1: Decide whether v0 fits your project before starting
v0 fits you if you're a developer or designer working on React or Next.js interfaces who wants to accelerate the first build stage, if you have an existing Vercel project that needs new components fast, or if you have a Figma design you want turned into real code instead of building it manually from scratch. It doesn't fit you if you want a complete app with database and login from one description — that's Lovable or Replit Agent territory, not v0. Nor does it fit if your stack isn't React or Next.js at all, or you're hunting for a cheap solo tool without per-seat team pricing.
Note: The core difference from 'description-to-full-app' tools: v0 builds only the interface, while Lovable and Replit Agent build UI plus database plus login plus hosting from the same request.
Step 2: Create a free account and start with a prompt or an uploaded design
Go to v0.app and register free. You have two ways in: write a text description of the component or page you need — a sign-up form, a landing page, a dashboard — or upload a design image or Figma screenshot, which v0 analyzes to generate matching frontend code. The second route saves you building from zero, but expect light manual corrections afterward rather than a pixel-perfect copy.
Note: The more precise your description of behavior and layout, the closer the first result — mention column counts, element ordering, and what happens at each interaction.
Step 3: Review the result and refine via chat or Design Mode
After the first generation, don't expect publish-ready output. Review it and refine either through normal conversation — request a specific change and describe it — or through Design Mode, a visual editing mode where you adjust the interface directly instead of writing every small change as text. Design Mode shines for simple visual tweaks like spacing, colors, and element ordering, because doing them by hand-description is slower.
Note: If you uploaded a Figma design earlier, this is the stage where you reconcile any gap between generated code and the original design.
Step 4: Export to GitHub or publish straight to Vercel
Since v0 comes from Vercel itself, its code is directly compatible with a real Vercel project and follows React and Next.js conventions without major rewriting. Two options: link GitHub and push the code so it merges into your existing project, or publish directly to Vercel in one click and get a working URL within minutes without shopping for separate hosting.
Note: If you already run a Vercel project, GitHub export beats direct publishing — it lets you integrate the new components inside your existing structure instead of spawning a separate project.
Step 5: Do the free-plan math before making it your regular workflow
The free plan covers trying the idea and generating one simple component or page — $5 of monthly credit with a hard cap of 7 messages per day. For any regular use or real project, credits vanish quickly and the daily cap stops you mid-task. If you genuinely hit those limits and need continuity, next step up is Plus at $30/month per user — note it's seat-based, built for teams sharing billing, not an economical price for a light individual user.
Note: Regularly hitting the 7-message daily ceiling is the clear signal you've left the 'trying it' phase and entered real usage that needs a paid plan.
Common mistakes — and how to avoid them
MistakeExpecting v0 to build a complete app with database and login from one description, like Lovable does.
Do this insteadUnderstand from the start that it's frontend-only. For a complete app from one prompt, Lovable or Replit Agent is the right choice.
MistakeUploading a Figma design and expecting pixel-perfect publish-ready code with no review.
Do this insteadTreat the output as a good approximation that saves you building from zero, then reconcile differences through chat or Design Mode.
MistakeRelying on the free plan for a real project and getting surprised when credit runs dry or the daily message cap halts you mid-work.
Do this insteadBudget knowing the free plan is trial-only — $5 of credit and 7 messages daily — and move to a paid plan once you exceed it regularly.
MistakeConsidering a Plus upgrade as a cheap individual option just to escape free-plan limits.
Do this insteadRemember Plus is priced per seat at $30/user/month, designed for teams pooling billing — not an economical solo rate.
❓ Frequently asked questions
What's the difference between v0 and Lovable?
v0 is frontend-only — clean React or Next.js components and pages you merge into a real project. Lovable and Replit Agent build entire apps from one description: UI, database, login, hosting. Want professional UI inside an existing codebase? v0. Want a whole working app from nothing? Lovable or Replit Agent.
Can it build the backend or database?
No. v0 produces high-quality frontend only — database and backend logic remain your responsibility or require wiring to a separate service.
Is the free plan enough for a real project?
Only for testing the idea and generating one simple component or page. For regular work, $5 monthly credit and the 7-messages-daily cap run out fast, and you'll need Plus for genuine continuity.
Can I use my own design system?
Partially. Generated code follows standard Tailwind and shadcn/ui conventions, so teams already on that stack can steer output toward their tokens and components through prompting — but there's no way to fully import a custom design system, and non-Tailwind projects need manual restyling after export.