This is the fast reference for prompting v0 by Vercel — the generative-UI and app builder that turns a natural-language prompt into production React, Next.js, Tailwind, and shadcn/ui code. Every modifier that actually changes v0's output lives in a table below, followed by fully-written example prompts you can paste into the v0 chat box.
For the full roundup pair this with the 40 best v0 prompts, and for the reasoning behind each move read how to prompt v0 for UI. Prompts are plain messages — v0 has no flags, just clear English. Fill the [bracketed placeholders] before sending.
The universal prompt formula
Every strong v0 prompt names three things: the real product surface, the context of use, and hard constraints including exact design tokens. Vercel's own template is the fastest way to hit all three:
Build [product surface — the actual components, data, and actions].
Used by [who], in [what moment], to [decision or outcome].
Constraints:
- platform/device: [e.g. desktop web, responsive to 360px]
- visual tone: [e.g. calm, dense, editorial]
- layout assumptions: [e.g. left nav, content on the right]
- design tokens: [primary color, radius, font weights, spacing]
Stack: Next.js App Router, TypeScript, Tailwind, shadcn/ui.
Don't build: [what to leave out].Why it works: naming the specific surface (not "a dashboard" but "open-tickets count, avg response time, tickets by priority, an agent list with workload") gives v0 enough to generate real code instead of a generic placeholder — and a tight prompt burns fewer credits on retries.
3-part prompt structure
Fill each row and you have a complete prompt. Vague inputs produce vague UIs, so be concrete in every cell.
| Part | What to put in it | Example phrasing |
|---|---|---|
| Product surface | The exact components, data, and actions on screen | "a KPI row (MRR, active users, churn), a revenue line chart, and a recent-signups table with a status badge" |
| Context of use | Who uses it, in what moment, to make what decision | "used by a founder each morning to decide where to spend the day" |
| Constraints & taste | Platform, tone, layout assumptions, and exact design tokens | "desktop-first, calm and data-dense, left sidebar nav, primary #4F46E5, radius 8px" |
Design-token modifiers
Replace adjectives like "modern" with values v0 can apply directly. State tokens as concrete numbers and hexes.
| Token | Example phrasing |
|---|---|
| Color | "primary #4F46E5, neutral slate, one accent for success/error only; light theme" |
| Radius | "border radius 12px on cards and inputs, 6px on buttons" |
| Font weight | "body Inter 400, labels 500, headings 700; no ultra-bold" |
| Spacing | "8px spacing scale, generous section padding (32px), tight table rows" |
| Shadow | "soft, low shadows on cards; no shadow on flat surfaces or the nav" |
| Density | "comfortable density for forms, compact density for the data table" |
You can also set tokens visually after the first generation — open Design Mode to tweak colors, spacing, and typography without writing another prompt.
Stack & framework modifiers
Name the stack and v0 emits code that matches it. Reference shadcn/ui components by name and say where data lives.
| Modifier | Example phrasing |
|---|---|
| Framework | "Next.js App Router, TypeScript, server components by default" |
| Styling | "Tailwind only, no CSS modules; use CSS variables for the theme" |
| Components | "shadcn/ui: use Card, Dialog, Sheet, DataTable, Badge, and Sonner for toasts" |
| Mutations | "handle form submits with a server action; validate with zod" |
| API routes | "add a route handler at app/api/[resource]/route.ts returning JSON" |
| Database | "wire persistence to Supabase (Postgres); create the table and typed queries" |
Iteration commands
After the first generation you refine. Pick the right tool for the job — prompts for behavior and structure, Design Mode for visual polish.
| Command / method | What it does | When to use |
|---|---|---|
| Prompt for changes | Natural-language edit to the current generation | Functional changes, new features, restructuring layout |
| Design Mode | Visual editor for colors, spacing, typography, component states | Quick visual polish without a new prompt |
| Prompt queuing | Chain up to ~10 sequential instructions | Working through a multi-step build in order |
| Fork | Branch a generation into a separate copy | Trying a bolder direction without losing the original |
| "Make it responsive down to 360px." | Adds mobile breakpoints and reflow | Before shipping any layout |
| "Add loading and empty states." | Skeletons, spinners, and empty-data views | Any screen that fetches data |
| "Write a short PRD first, then build." | Plan-first: v0 outlines before coding | Bigger apps you want to review before it builds |
What NOT to build (guardrails)
v0 adds scope on its own and every generation costs credits, so state the boundaries. Paste these lines to keep output focused.
| Guardrail phrase | Why it helps |
|---|---|
| "No auth yet — assume the user is signed in." | Skips a whole subsystem you can add later |
| "Use mock data, no database." | Keeps the first pass fast and cheap to review |
| "Don't add a dark-mode toggle." | Prevents theme scope you didn't ask for |
| "One screen only — no routing or extra pages." | Focuses the generation on the surface that matters |
| "No animations or marketing copy." | Cuts filler so you see the real structure |
| "Don't refactor unrelated components." | Limits blast radius on an existing project |
Example prompts
Six prompts that combine the modifiers above. Fill the placeholders and paste into the v0 chat.
Build an analytics dashboard: a KPI row (MRR, active users, churn %), a revenue line chart, and a recent-signups table with a status Badge. Used by a solo founder each morning to decide where to focus the day. Constraints: desktop-first, calm and data-dense, left sidebar nav, primary #4F46E5, radius 8px, Inter body 400 / headings 700, soft low shadows. Stack: Next.js App Router, TypeScript, Tailwind, shadcn/ui (Card, DataTable, Badge). Use mock data, no database. Don't add auth or a dark-mode toggle.Best for: a clean first pass on a dashboard you can wire to real data later.
Build a pricing page with three plan Cards (Starter, Pro, Team), a monthly/annual toggle, and a feature-comparison table below. Used by a visitor deciding which plan to buy. Constraints: responsive to 360px, confident and modern tone, centered layout max-width 1120px, primary [#HEX], radius 12px, comfortable spacing (24px), soft shadows on the highlighted plan only. Stack: Next.js App Router, Tailwind, shadcn/ui. No animations, no marketing fluff beyond the plan copy.Why it works: exact tokens plus a single focused surface keep the output tight and on-brand.
Build a support-ticket inbox: a left list of tickets (subject, requester, priority Badge, age) and a right detail pane (thread, status dropdown, reply box). Used by a support agent triaging the queue. Constraints: desktop, dense, compact table density, neutral slate palette with one accent for urgent, radius 6px. Stack: Next.js App Router, TypeScript, Tailwind, shadcn/ui (Sheet, Badge, Textarea). Handle the reply submit with a server action and validate with zod. No auth yet.Best for: an interactive surface where you want a real server action wired in.
Write a short PRD for a habit-tracker app (screens, data model, key actions), then build the main screen: a weekly grid of habits with checkable days, a streak counter, and an "add habit" Dialog. Used by someone reviewing their week each evening. Constraints: mobile-first to 360px, calm, radius 12px, 8px spacing scale, Inter. Stack: Next.js App Router, Tailwind, shadcn/ui. Wire persistence to Supabase — create the habits and check-ins tables and typed queries. Add loading and empty states.Best for: a bigger build where a plan-first PRD keeps the generation on track.
Import my repo and add a settings page under app/settings. Match the existing shadcn/ui components and Tailwind theme already in the project. Sections: profile, notifications (toggle list), and danger zone (delete account with a confirm Dialog). Handle saves with a server action. Don't refactor unrelated components and don't touch the existing nav. Make it responsive down to 360px.Why it works: naming the repo, the target path, and a tight blast radius stops v0 from rewriting code that already works.
Queue these steps: (1) scaffold a two-column checkout with an order summary Card on the right; (2) add the shipping and payment forms on the left with zod validation; (3) add loading and empty states; (4) make it responsive to 360px; (5) apply tokens — primary [#HEX], radius 8px, soft shadows, comfortable density. Stack: Next.js App Router, Tailwind, shadcn/ui. Use mock data, no real payment integration.Best for: prompt queuing — v0 works through the numbered steps in order.
Ready to fill these in fast? Grab the v0 prompt templates for blank fill-in-the-blank versions, or browse the 40 best v0 prompts for finished examples.
Frequently Asked Questions
What is the universal v0 prompt formula?
Build [product surface]. Used by [who], in [what moment], to [decision/outcome]. Constraints: platform/device, visual tone, layout assumptions, and exact design tokens. Naming the real components, the context of use, and hard constraints gives v0 enough to generate production React instead of a generic placeholder.
What are design-token modifiers in a v0 prompt?
Exact visual values you state in the prompt: primary color hex, border radius, font weight, spacing scale, shadow depth, and density — e.g. "primary #4F46E5, radius 12px, base font Inter 400, headings 700, 8px spacing scale, soft shadows, comfortable density." They replace vague words like "modern" with values v0 can apply directly.
How do I tell v0 which stack to use?
Name it explicitly: "Next.js App Router, TypeScript, Tailwind, shadcn/ui." Reference shadcn/ui component names (Card, Dialog, DataTable, Sheet), ask for server actions or route handlers for mutations, and name your database (Supabase, Neon, or Postgres) when you want v0 to wire persistence.
What is the difference between Prompt for changes and Design Mode?
Prompt for changes is best for functional edits: adding features, restructuring layout, wiring data. Design Mode is a visual editor for tweaking colors, spacing, and typography without writing code. Use prompts for behavior and structure, Design Mode for quick visual polish.
What is prompt queuing in v0?
Prompt queuing lets you chain up to roughly ten sequential instructions so v0 works through them in order — for example: scaffold the layout, add the data table, then add loading and empty states, then make it responsive.
Why should I tell v0 what NOT to build?
v0 tends to add scope on its own, and every generation burns credits. Guardrails like "no auth yet," "no dark-mode toggle," and "use mock data, no database" keep the output focused, cheaper, and easier to review before you add complexity.
Does the model tier I pick change prompt quality?
Prompting technique matters more than the tier. A tight prompt with a clear product surface, context of use, and exact design tokens produces better output on any tier than a vague prompt on a premium one, and it wastes fewer credits on retries.
How do I fork a v0 generation?
Fork a generation to branch a design without losing the original. It is the safe way to try a bolder visual direction or a different layout: fork, prompt the variation, and compare against the parent before you commit to one.