How to Use v0 by Vercel

v0 by Vercel turns natural-language prompts into production-ready React components using shadcn/ui and Tailwind CSS.

v0 is Vercel’s generative UI tool. You describe a screen in plain English — or paste a Figma frame, a screenshot, or a rough sketch — and it returns a working React component using shadcn/ui primitives and Tailwind classes. It is optimized for Next.js App Router output, so generated code drops into a real project with minimal cleanup. Iteration is chat-based: you refine the output by replying with corrections rather than editing a prompt from scratch.

What it is

v0 is a hosted web app built on top of Vercel’s own model (v0-1.5-md) with fallbacks to frontier models for heavier reasoning. The generated code uses TypeScript, React Server Components when sensible, and the shadcn/ui component library under the MIT license. Maintainer: Vercel. It is paid beyond a small free tier, billed by message credits.

Install

There is nothing to install locally — v0 lives at v0.dev. To pull generated components into a project:

npx shadcn@latest add "https://v0.dev/chat/b/<block-id>"
# or copy/paste from the v0 preview pane

First run

Open v0.dev, sign in with your Vercel account, and type a prompt such as “pricing page with three tiers”.

// v0 returns files like this that you drop into app/
export default function Pricing() {
  return (
    <section className="py-24">
      <h1 className="text-4xl font-bold">Pricing</h1>
      {/* three Card components follow */}
    </section>
  )
}

Everyday workflows

• Paste a screenshot of a competitor’s landing page and ask for a branded equivalent.
• Iterate in chat — “make the hero dark, move the CTA right, add a testimonial row”.
• Click “Add to Codebase” to ship straight to a connected GitHub repo and open a PR.

Gotchas and tips

v0 often imports components you have not installed yet. Run the shadcn add command it suggests before hitting save, or the build will break on missing primitives. Generated server components sometimes call client-only hooks — double-check that “use client” lives at the top of interactive files.

Treat v0 output as a strong first draft, not a final commit. It tends to inline data that should come from your CMS or database, and accessibility attributes are decent but not perfect — audit tab order and alt text before shipping.

Who it’s for

Founders and full-stack engineers who already live in the Next.js + Tailwind stack. Tip: keep a design-system reference project pinned as v0 context so every new generation matches your existing tokens.