v0.dev: Chat Your Way to a React Component

v0 by Vercel generates working React and Next.js code from prompts. Look at what it nails, what it still gets wrong, and why it's changed how startup MVPs get built.

25 min · Reviewed 2026

v0.dev is Vercel's AI UI generator. You describe what you want ('a pricing page with three tiers'), and v0 produces working React code using Tailwind CSS and shadcn/ui components. It opens in a live preview, you can iterate by chatting ('make the buttons bigger, add a FAQ'), and you export the code to your repo. Since its 2023 launch it has become a go-to tool for prototyping and is credited with shipping countless indie SaaS landing pages.

What it's genuinely good at

Generating landing pages, marketing sites, and dashboards from a single prompt in 30 seconds.
Shipping code that actually works — uses real Next.js 15 and shadcn/ui, not made-up APIs.
Iterative design — chat to refine, v0 keeps the context across turns.
Image-to-code — drop in a Figma screenshot, get a code approximation.
One-click deploy to Vercel — prototype live in under a minute.

What it struggles with

State management and real backend logic — v0 excels at UI, not at complex interactions.
Non-React frameworks — Vue, Svelte, Solid are not supported.
Large apps — it works component-by-component; stitching together a 50-screen app is manual.
Visual fidelity to designs — close but rarely pixel-perfect from Figma imports.
Customization beyond shadcn — if your design system is unique, v0's output feels templated.

Pricing (April 2026)

Free: 200 credits/month — enough for ~20-40 simple generations.
Premium: $20/month — 5,000 credits, priority queue.
Team: $30/user/month — shared projects, team billing.
Enterprise: Custom — SSO, private generations, higher rate limits.

// Example prompt: 'pricing card with three tiers, highlight middle'
// v0 generates something like this:
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'

export function PricingCard({ name, price, features, highlighted }) {
  return (
    <Card className={highlighted ? 'border-primary border-2' : ''}>
      <h3>{name}</h3>
      <p className='text-3xl'>${price}</p>
      <ul>{features.map(f => <li key={f}>{f}</li>)}</ul>
      <Button variant={highlighted ? 'default' : 'outline'}>
        Get started
      </Button>
    </Card>
  )
}

Who should bother: Next.js developers, indie hackers shipping MVPs, designers who want working prototypes instead of Figma files, anyone already deploying on Vercel. Who shouldn't: non-React teams, developers needing complex state or backend logic, designers needing exact fidelity. v0 is not a replacement for engineering — it's a very fast skeleton generator.

End-of-lesson check

15 questions · take it digitally for instant feedback at tendril.neural-forge.io/learn/quiz/end-tool-v0-dev-builders

What is the core idea behind "v0.dev: Chat Your Way to a React Component"?
1. v0 by Vercel generates working React and Next.js code from prompts. Look at what it nails, what it still gets wrong, and why it's changed how startup MVPs get built.
2. Auto-generated updates — ClickUp writes status reports from task changes.
3. Voice cloning — 30 seconds of sample audio produces a usable clone.
4. Mockup generation — place your design on realistic products in one click.
Which term best describes a foundational idea in "v0.dev: Chat Your Way to a React Component"?
1. shadcn/ui
2. v0.dev
3. React generation
4. Vercel
A learner studying v0.dev: Chat Your Way to a React Component would need to understand which concept?
1. v0.dev
2. React generation
3. shadcn/ui
4. Vercel
Which of these is directly relevant to v0.dev: Chat Your Way to a React Component?
1. v0.dev
2. shadcn/ui
3. Vercel
4. React generation
Which of the following is a key point about v0.dev: Chat Your Way to a React Component?
1. Generating landing pages, marketing sites, and dashboards from a single prompt in 30 seconds.
2. Shipping code that actually works — uses real Next.js 15 and shadcn/ui, not made-up APIs.
3. Iterative design — chat to refine, v0 keeps the context across turns.
4. Image-to-code — drop in a Figma screenshot, get a code approximation.
Which of these does NOT belong in a discussion of v0.dev: Chat Your Way to a React Component?
1. Generating landing pages, marketing sites, and dashboards from a single prompt in 30 seconds.
2. Shipping code that actually works — uses real Next.js 15 and shadcn/ui, not made-up APIs.
3. Iterative design — chat to refine, v0 keeps the context across turns.
4. Auto-generated updates — ClickUp writes status reports from task changes.
Which statement is accurate regarding v0.dev: Chat Your Way to a React Component?
1. Non-React frameworks — Vue, Svelte, Solid are not supported.
2. Large apps — it works component-by-component; stitching together a 50-screen app is manual.
3. State management and real backend logic — v0 excels at UI, not at complex interactions.
4. Visual fidelity to designs — close but rarely pixel-perfect from Figma imports.
Which of these does NOT belong in a discussion of v0.dev: Chat Your Way to a React Component?
1. Non-React frameworks — Vue, Svelte, Solid are not supported.
2. State management and real backend logic — v0 excels at UI, not at complex interactions.
3. Large apps — it works component-by-component; stitching together a 50-screen app is manual.
4. Auto-generated updates — ClickUp writes status reports from task changes.
What is the key insight about "The gotcha" in the context of v0.dev: Chat Your Way to a React Component?
1. v0 is locked into Vercel's stack: Next.js, Tailwind, shadcn/ui.
2. Auto-generated updates — ClickUp writes status reports from task changes.
3. Voice cloning — 30 seconds of sample audio produces a usable clone.
4. Mockup generation — place your design on realistic products in one click.
Which statement accurately describes an aspect of v0.dev: Chat Your Way to a React Component?
1. Auto-generated updates — ClickUp writes status reports from task changes.
2. v0.dev is Vercel's AI UI generator. You describe what you want ('a pricing page with three tiers'), and v0 produces working React code using…
3. Voice cloning — 30 seconds of sample audio produces a usable clone.
4. Mockup generation — place your design on realistic products in one click.
What does working with v0.dev: Chat Your Way to a React Component typically involve?
1. Auto-generated updates — ClickUp writes status reports from task changes.
2. Voice cloning — 30 seconds of sample audio produces a usable clone.
3. Who should bother: Next.js developers, indie hackers shipping MVPs, designers who want working prototypes instead of Figma files, anyone alr…
4. Mockup generation — place your design on realistic products in one click.
Which best describes the scope of "v0.dev: Chat Your Way to a React Component"?
1. It is unrelated to tools workflows
2. It applies only to the opposite beginner tier
3. It was deprecated in 2024 and no longer relevant
4. It focuses on v0 by Vercel generates working React and Next.js code from prompts. Look at what it nails, what it s
Which of the following is a concept covered in v0.dev: Chat Your Way to a React Component?
1. v0.dev
2. shadcn/ui
3. React generation
4. Vercel
Which of the following is a concept covered in v0.dev: Chat Your Way to a React Component?
1. v0.dev
2. shadcn/ui
3. React generation
4. Vercel
Which of the following is a concept covered in v0.dev: Chat Your Way to a React Component?
1. v0.dev
2. shadcn/ui
3. React generation
4. Vercel

← Back to interactive lesson

Tendril · Builders · Tools Literacy