Skip to content
explore
v0 logo

v0

Visit v0

Build full-stack web apps from prompts with AI-generated code, preview, and deploy.

CodingDesign

How it works / How to use

Build full-stack web apps from prompts with AI-generated code, preview, and deploy. Start a chat at v0.app, describe what you want in natural language, and review the generated app in preview. v0 defaults to modern React UI patterns (including shadcn/ui and Tailwind). For complex apps, gather requirements first; for simple ones, implement directly. Iterate in chat, Code view, or Design Mode (Option/Alt + D).

  1. Open v0.app, sign in, and start a new chat or project.
  2. Describe the UI or app: functionality, layout preferences, and stack constraints.
  3. Review the preview, then refine with targeted follow-ups, Code edits, or Design Mode.
  4. Connect environment variables and integrations when the app needs APIs or databases, then deploy or export.

Simple UI and landing pages

For straightforward pages, describe the implementation directly—no planning phase required per v0 quickstart guidance.

What to provide

  • Page purpose and primary call to action
  • Sections to include (hero, features, pricing, FAQ)
  • Visual preferences: light/dark, density, brand colors if known

Details that improve the result

  • Start with prompts like “A landing page for a SaaS product with hero section and pricing table”
  • Specify UI/UX preferences up front to reduce rework
  • Use Design Mode to tweak styles visually after the first pass

Example prompt

Landing page for a developer tools SaaS. Sections: hero with email capture, three feature columns, pricing table with two tiers, FAQ accordion. Light theme, generous whitespace, primary CTA “Start free”.

If the first output is not good

  • “Keep hero layout; shorten feature blurbs to one line each.”
  • “Switch to dark theme with zinc background and violet accent.”
  • “Add mobile stacking for pricing cards below 768px.”

Common mistakes

  • Prompting “make a website” with no sections or CTA
  • Mixing three unrelated page types in one first prompt
  • Skipping mobile layout requirements until the end

Components and dashboards

Use component-first development: build one piece, validate in preview, then add sections incrementally.

What to provide

  • Component behavior, states, and props
  • Data fields to display (even with mock data)
  • Framework preference (React default; name Next.js if required)

Details that improve the result

  • Include props interfaces and null handling when v0 should generate production-ready code
  • v0 defaults to React, Tailwind, and shadcn/ui conventions
  • Ask for accessibility improvements explicitly when needed

Example prompt

Create a SummaryCard React component using shadcn/ui Card and Tailwind. Props: headline (string), context (string), discussionPoints (string list), takeaways (string bullets). Handle empty takeaways with “None yet”.

If the first output is not good

  • “Add loading skeleton state for headline and context.”
  • “Extract badge color into a variant prop: default | warning.”
  • “Show keyboard focus styles on interactive elements.”

Common mistakes

  • Naming a component without its states (loading, empty, error)
  • Omitting null/empty handling for optional fields
  • Requesting five components in one message before reviewing the first

Complex apps (plan first)

For multi-feature or enterprise-style apps, start with requirements gathering, then implement the MVP, then iterate feature by feature.

What to provide

  • Users, roles, and core workflows
  • Data entities and required integrations
  • MVP scope vs later-phase features

Details that improve the result

  • v0 docs recommend planning first when multiple roles or systems interact
  • Follow with: “Build the MVP based on the PRD, starting with core features.”
  • You can add follow-up prompts while a generation runs—check v0 docs for current queue limits on your plan

Example prompt

Plan a customer support ticket system: roles (agent, admin), ticket statuses, assignment, comments, search. Output a concise PRD with MVP vs phase 2. Do not implement yet.

If the first output is not good

  • “Build MVP: ticket list, detail view, create ticket form with validation.”
  • “Add search and pagination to the ticket list.”
  • “Implement real-time updates”—only after core CRUD works

Common mistakes

  • Asking for full enterprise scope in the first generation
  • Skipping error handling and empty states on data views
  • Adding integrations before the core UI renders

Full-stack features and integrations

Describe the integration in plain language; v0 generates connection code and prompts you to add secrets via Project → Environment Variables.

What to provide

  • External service (database, auth, email, payments)
  • Environment variables needed
  • Server vs client behavior boundaries

Details that improve the result

  • Example starter prompts include contact forms that send email or dashboards with charts
  • Specify preferred stack: Next.js, AI SDK, etc., when it matters
  • Include error handling for network failures and validation errors

Example prompt

Contact form with name, email, message. Validate required fields client-side, POST to /api/contact, show success and error toasts. Use environment variable for the email provider API key.

If the first output is not good

  • “Add rate limiting message when API returns 429.”
  • “Log errors server-side without exposing secrets to the client.”
  • “Switch storage from in-memory to Postgres using DATABASE_URL.”

Common mistakes

  • Expecting secrets to work without adding Environment Variables
  • Omitting server/client boundaries for auth tokens
  • Bundling payments, auth, and admin analytics in one prompt

Visual iteration with Design Mode

Enable Design Mode (Option/Alt + D), select elements in the preview, adjust visually or with short natural-language instructions, then Apply to commit a new chat version.

What to provide

  • Generated preview that is close but not exact
  • Elements to tweak (spacing, color, typography)
  • Whether changes should apply to code immediately

Details that improve the result

  • Design Mode edits write back to source as a new version
  • Use when chat-only refinements feel slower than direct visual tweaks
  • Pair with Code view for logic changes Design Mode cannot express

Example prompt

Design Mode: select primary button, increase padding, darken hover state, align icon gap to 8px. Apply to code.

If the first output is not good

  • Fix one component’s spacing before restyling the whole page
  • Return to chat for structural changes (new section, props, data wiring)
  • Compare versions in chat history before deploying

Common mistakes

  • Using Design Mode for new features that need new data models
  • Applying visual changes before verifying mobile preview
  • Editing code manually and Design Mode in parallel without syncing intent

Clone from screenshots or Figma

Attach the visual reference, state fidelity expectations, and ask v0 to reproduce the layout with your stack defaults unless you specify otherwise.

What to provide

  • Screenshot or Figma file reference
  • What must match (layout, typography) vs what can differ (copy, colors)
  • Responsive breakpoints to support

Details that improve the result

  • v0 documents cloning pages from screenshots or Figma files as a core workflow
  • Call out accessibility gaps you want fixed vs strict visual match
  • Iterate with Design Mode for pixel-level adjustments

Example prompt

Recreate this checkout screenshot in React + Tailwind + shadcn/ui. Match layout and hierarchy; use neutral placeholder copy; improve focus states and form labels for accessibility.

If the first output is not good

  • “Match spacing on order summary column only.”
  • “Replace bitmap icons with lucide icons at 20px.”
  • “Add tablet breakpoint at 1024px mirroring the mobile stack rules.”

Common mistakes

  • Expecting licensed brand assets to be reproduced exactly
  • No mention of interactive states (hover, error, disabled)
  • Single desktop-only pass with no responsive requirements

Code editing and progressive enhancement

Switch to Code view for direct edits, or ask in chat with narrow diffs. Build core features first, then persistence, then UX polish—v0’s progressive enhancement pattern.

What to provide

  • Current behavior vs desired change
  • File or component name if you know it
  • Test case or example input/output

Details that improve the result

  • Steps example: basic todo list → add localStorage → add filters/checkboxes
  • Copy generated code includes imports—install any missing shadcn components
  • Ask v0 to plan when unsure how to decompose a change

Example prompt

Step 1: basic todo list with add/delete. Step 2: persist todos to localStorage. Step 3: add completion checkbox and filter tabs (All / Active / Done).

If the first output is not good

  • “Show the fix as a minimal diff against the current TodoList component.”
  • “Add a unit test for the filter logic.”
  • Queue next step while v0 finishes the current generation

Common mistakes

  • Changing multiple unrelated files without testing between steps
  • Pasting code without installing referenced shadcn components
  • Skipping error handling when adding persistence or APIs

Technical questions about the Vercel stack

Ask direct technical questions about Next.js, Vercel, and related stack topics—v0 docs cover common patterns.

What to provide

  • Framework version and feature area (routing, SSR, auth)
  • What you tried and the error or unexpected behavior
  • Link or snippet if the question is code-specific

Details that improve the result

  • Example queries include SSR in Next.js 14 or Turborepo performance tuning
  • Use this mode for implementation guidance, not only UI generation
  • Follow answers by asking v0 to apply the pattern inside your project

Example prompt

How should I implement server-side rendering for a product catalog page in Next.js 14 App Router with cached fetch and incremental static regeneration? Then apply the pattern to my v0 project.

If the first output is not good

  • “Show the smallest working example in my repo structure.”
  • “List trade-offs vs client-side fetching for this page.”
  • “Add error boundary around the data fetch.”

Common mistakes

  • Asking stack questions without naming the framework version
  • Treating informational answers as applied code without an implement step
  • Mixing unrelated stack questions into a UI generation thread

How to prompt

v0 prompts work like a product brief: name the surface, users, actions, data, constraints, and visual taste. Be specific instead of saying “make a website.” Break complex apps into steps, specify technologies when they matter, and iterate with one change at a time. You can queue up to 10 prompts while v0 is generating.

Product: internal support ticket dashboard.
Users: support agents.
Core UI: searchable ticket table, status badges, detail drawer with comment thread.
Stack: Next.js App Router, shadcn/ui, Tailwind.
Constraints: keyboard accessible filters; mock data only for v1.

Be specific about functionality and design

v0’s docs contrast vague prompts with detailed ones that include functionality, design preferences, and technical requirements.

Example

Instead of “make a website”: “Marketing site for an AI note app with hero, three features, testimonial carousel, pricing, dark theme, mobile-first.”

Break down complex tasks

Large apps are easier to build incrementally—fewer errors, easier debugging, testable milestones.

Example

Message 1: auth pages. Message 2: dashboard shell. Message 3: settings form— not all three in one prompt.

Include technical details

Name frameworks, libraries, and integrations so v0 matches your stack instead of generic defaults.

Example

Use Next.js 14 App Router, shadcn/ui Form components, zod validation, and server actions for mutations.

Specify error handling

Ask for loading, empty, and error states up front to avoid happy-path-only UI.

Example

Show skeleton loaders while fetching, inline field errors on submit failure, and a retry button if the API times out.

Ask v0 to plan when stuck

For uncertain complex work, request a step-by-step plan before implementation.

Example

Before coding: list milestones, data models, and risks for a multi-role analytics dashboard.

Best output tips

Start simple

v0 quickstart suggests prompts like a todo app, SaaS landing page, analytics dashboard, or contact form—use them as templates, then add your constraints.

Simple vs complex workflow

Straightforward tools and landing pages can jump straight to implementation. Multi-feature apps benefit from requirements gathering, MVP build, then iterative enhancements.

Component-first development

Generate one component or section, validate in preview, then add the next (“Add a hero section below the header”). This reduces debugging surface area.

Progressive enhancement

Follow core → persistence → UX polish. Example path: basic todos, localStorage, filters/checkboxes—confirm each step before expanding scope.

Prompt templates

v0 docs provide CRUD, authentication, and dashboard prompt templates—customize entities, fields, and validation rather than starting from a blank message.

Design Mode workflow

Press Option/Alt + D, select preview elements, adjust visually or in short natural language, then Apply to commit changes as a new chat version.

Code view edits

Switch to the Code tab for direct edits when you know the exact change. Combine with chat for larger refactors you cannot express visually.

Environment variables

Integrations that need secrets use Project → Environment Variables. Describe the integration in chat first; add keys before testing live APIs.

Prompt queuing

On supported plans, you can queue follow-up prompts during an active generation and reorder or edit them before they run.

Voice input

Use the microphone icon in the prompt bar to dictate prompts when signed in; review transcription before sending.

Multimodal references

v0 supports workflows that clone layouts from screenshots or Figma files—state what must match and what should improve (especially accessibility).

Technical Q&A

Ask implementation questions about Next.js, Svelte, Turborepo, AI SDK, or Vercel, then follow up with “apply this to my project” for concrete code.

Default stack awareness

Generated UI commonly uses React, Tailwind, and shadcn/ui. Say otherwise if you need a different framework or component library.

  • Replace “make a website” with sections, users, actions, and constraints.
  • Build simple pages directly; plan first for multi-role or multi-system apps.
  • Develop component-by-component when you need tight control.
  • Name your stack explicitly (Next.js, Tailwind, shadcn/ui) when defaults are not enough.
  • Include loading, empty, and error states in the first brief.
  • Use Design Mode for visual tweaks; use chat or Code view for structure and logic.
  • Queue related follow-ups while v0 is still generating when your plan supports it.
  • Install any shadcn components v0 imports before running locally.
  • Deploy or open a PR only after checking mobile preview and basic accessibility.

Try this AI

Try v0

Product Details

Pricing, features, limits and latest updates

v0

Build full-stack web apps from prompts with AI-generated code, preview, and deploy.

Free / Paid · Free

Pricing Plans

Free

Free

Plus

$30/ Monthly

Business

$100/ Monthly

Enterprise

Custom

Key Features

Chat

Generates and iterates UI and full-stack apps from prompts, with a daily message cap on Free.

Automation

Design Mode, GitHub sync, and Vercel deploy turn generated UI into shipped apps.

Design to Code

Turns natural-language prompts into interface code and deployable web apps.

Limits

  • Free daily messages: 7 per day. Free plan daily message allowance (v0 pricing docs).
  • Free monthly credits: 5 USD/month. Free plan included monthly credits (v0 pricing docs).

Ideas / Prompt experiences

Share a prompt that worked for you. Username and email are shown with your submission. External links are not allowed.

Example prompt

Landing page from product brief

Prompt

Build a landing page for a developer tool waitlist. Sections: hero, three feature cards, FAQ, email capture. Stack: Next.js, Tailwind, shadcn/ui. Constraints: responsive, accessible contrast, no stock photos.

Short explanation

v0 docs recommend incremental prompts with product surface, sections, stack, and constraints.

Example prompt

Iterate in Design Mode

Prompt

Keep the layout. Update typography to feel more editorial: larger hero heading, tighter subcopy, more whitespace between sections.

Variation

Add a dark mode variant using the same component structure.

Short explanation

Design Mode applies visual edits back to code on the latest preview runtime.

Share your experience

Required fields are marked. Variation, result, and explanation are optional.

You may also like

Cursor logo

Cursor

Explore

AI coding agent for building software in your editor, terminal, and IDE.

CodingFree / Paid

AutoGPT logo

AutoGPT

Explore

Platform for building and running AI agents with visual Agent Builder, AutoPilot chat, scheduling, and 200+ integration blocks; self-host open source or use hosted Pro/Max plans.

CodingFree / Paid

Hugging Face logo

Hugging Face

Explore

Models, datasets, and inference for open machine learning.

CodingFree / Paid

Back to Explore