v0.dev: Chat Your Way to a React Component

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.

• 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.

• 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.

• 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.