v0 by Vercel Review: AI-Generated React Components That Actually Ship

I opened v0, typed “a settings page with profile editing, notification preferences, and a connected accounts section,” and watched it generate a fully functional three-tab settings interface in under 40 seconds. The component used shadcn/ui primitives, Tailwind utility classes, and TypeScript types — the exact stack I would have chosen if I had written it from scratch. I copied the code, pasted it into my Next.js project, changed two import paths, and it rendered correctly on the first try.

This is the v0 value proposition distilled: generate UI components that look like a senior frontend developer wrote them, then paste them into your real project without rewriting half the output. After generating 15 components across two weeks of real product work, I can confirm that v0 delivers on this promise more reliably than any general-purpose AI coding tool I have tested. But its scope is narrower than the marketing suggests, and understanding where v0 stops being useful is as important as knowing where it excels.

The shadcn/ui Advantage

v0 is built on top of shadcn/ui, and this is the single most important fact about how it works. shadcn/ui is not a component library in the traditional sense — it is a collection of copy-pasteable React components built on Radix UI primitives with Tailwind styling. When v0 generates a component, it uses these primitives directly, which means the output is consistent, accessible, and composable.

The practical benefit is that v0-generated components integrate with your existing project without introducing a new design system. If you already use shadcn/ui — and a large and growing percentage of Next.js projects do — the generated components reuse your existing Button, Card, Dialog, and Input primitives. v0 just assumes you have them installed and generates code that expects them. If you do not have shadcn/ui in your project, v0 prompts you to run the initialization command before generating anything, which takes about 30 seconds.

This architecture means v0 avoids the quality ceiling that generic AI UI generators hit. When you ask ChatGPT or Claude to generate a React component, you get arbitrary HTML and CSS that may or may not match your design system, may or may not handle accessibility, and may or may not be responsive. v0 generates components using battle-tested, accessible primitives with consistent styling — because the primitives themselves enforce these properties.

The Iteration Workflow

v0’s interface is a chat panel with a live preview on the right. You describe what you want, v0 generates it, and you see the rendered component immediately. If something is wrong — wrong spacing, missing state, incorrect layout — you type what you want changed and v0 regenerates the component with the fix applied.

I found the iteration loop to be v0’s best-designed workflow feature. On a complex task like “build a multi-step checkout form with shipping address, payment method, and order summary,” the first generation got the structure right but the spacing was cramped and the payment form did not validate card numbers. I sent three follow-up messages: “add more vertical spacing between form sections,” “validate the card number field for correct length and format,” and “add a progress indicator at the top showing the three steps.” Each iteration took 20 to 35 seconds and addressed exactly what I asked without regressing on previous changes.

The workflow is genuinely faster than writing the component by hand. The checkout form would have taken me roughly 45 minutes to build from scratch with proper validation, responsive behavior, and the progress indicator. v0 plus three iterations took about eight minutes total, and I spent another five minutes on minor adjustments after copying the code. The time savings are not hypothetical — I measured this on a stopwatch, and the gap is consistent across the 15 components I generated.

// v0 generated this progress stepper for the checkout form.
// It handles active, completed, and upcoming states out of the box.

const steps = [
  { id: 'shipping', label: 'Shipping' },
  { id: 'payment', label: 'Payment' },
  { id: 'review', label: 'Review' },
];

function CheckoutStepper({ currentStep }: { currentStep: string }) {
  const currentIndex = steps.findIndex((s) => s.id === currentStep);

  return (
    <nav aria-label="Checkout progress" className="mb-8">
      <ol className="flex items-center gap-2">
        {steps.map((step, i) => (
          <li key={step.id} className="flex items-center gap-2">
            <span
              className={cn(
                'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium',
                i < currentIndex && 'bg-primary text-primary-foreground',
                i === currentIndex && 'border-2 border-primary text-primary',
                i > currentIndex && 'border-2 border-muted text-muted-foreground'
              )}
            >
              {i < currentIndex ? <Check className="h-4 w-4" /> : i + 1}
            </span>
            <span className="text-sm hidden sm:inline">{step.label}</span>
            {i < steps.length - 1 && (
              <div className="h-px w-8 bg-muted hidden sm:block" />
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

What v0 Cannot Do

v0 generates React components. It does not generate backend code, database schemas, API routes, authentication logic, or infrastructure configuration. If you ask for a full-stack app, it gives you the frontend components and tells you to handle the rest yourself. This is not a bug — it is a deliberate scope decision that keeps the output quality high by constraining the problem space.

The scope limitation becomes apparent when you try to use v0 for anything beyond component generation. I asked for “a user registration page with email verification” and got a beautiful form component with client-side validation. The API call was stubbed with a fetch to a placeholder URL. The email verification flow was represented as a comment: // TODO: Implement email verification logic on the backend. v0 knows its boundaries and does not pretend to cross them.

v0 also does not handle state management across multiple components. Each generation is a self-contained component or page. If your checkout form needs to share state with a cart summary in the header, v0 generates each independently, and you are responsible for lifting the state up and passing it through props or context. This is standard React architecture, but tools like Bolt.new and Lovable handle cross-component state automatically because they operate on the full application rather than individual components.

Integration with the Vercel Ecosystem

v0 integrates naturally with the Vercel deployment pipeline. Generated components reference Next.js patterns — server components, client components with 'use client' directives, and Next.js-specific APIs like next/navigation for routing. If you are deploying on Vercel, the generated components drop into your project with zero configuration changes.

The v0 + Next.js + shadcn/ui + Tailwind combination is a deliberately tight ecosystem play. It works beautifully within that stack and does not attempt to work outside it. If your project uses Remix, SvelteKit, or plain React without Tailwind, v0 is less useful — the generated code uses Tailwind classes and shadcn/ui imports that you would need to manually translate. Vercel is betting that the convenience of generating paste-ready components will pull developers toward the Vercel stack, and based on my experience, it is a compelling bet.

Pricing is usage-based. v0 offers a free tier with limited monthly generations, enough for occasional component needs. The Pro tier at $20 per month includes higher generation limits, priority queue access, and the ability to generate multiple components in parallel. For professional frontend developers who generate components daily, the Pro tier pays for itself in time saved within the first week.