v0 by Vercel: Generate React Components with AI

You describe a pricing table in plain English. Ten seconds later, you're looking at a production-ready React component with Tailwind CSS styling, accessible markup, and shadcn/ui integration. No boilerplate. No fighting with CSS Grid at 2 AM.

That's v0 by Vercel. It's not a full app builder -- it won't wire up your database or write your API routes. What it does is generate polished, clean React UI components faster than any human can type them. In 2026, it's become the go-to tool for frontend developers who'd rather spend their time on logic than layout.

This guide covers everything from your first prompt to production deployment, including the prompt engineering techniques that separate throwaway demos from genuinely usable components.

📋 What You'll Need

• A Vercel account -- sign up free at v0.app
• Basic React knowledge -- you should understand components, props, and JSX
• Familiarity with Tailwind CSS -- not required, but it helps you refine v0's output
• A Next.js project (optional) -- for integrating generated components into a real codebase
• Node.js 18+ -- for running the v0 CLI locally

🚀 What v0 Actually Is (and Isn't)

Let's clear up the most common misconception first: v0 is not a full-stack app builder. It generates UI components. Beautiful, well-structured, accessibility-aware UI components -- but components, not applications.

Here's how it fits in the ecosystem:

┌─────────────────────────────────────────────────────┐
│              AI Frontend Tool Spectrum                │
├───────────┬───────────────┬───────────────┬─────────┤
│  v0       │  Bolt.new     │  Lovable      │ Cursor  │
├───────────┼───────────────┼───────────────┼─────────┤
│ Component │ Full-stack    │ Full app      │ Code    │
│ generation│ prototyping   │ generation    │ editing │
│ + design  │ in browser    │ for non-devs  │ in IDE  │
└───────────┴───────────────┴───────────────┴─────────┘

v0 generates React code built on shadcn/ui -- the component library that's eaten the React ecosystem alive since 2023. Every component comes styled with Tailwind CSS, uses semantic HTML, and follows accessibility best practices out of the box.

The Tech Stack Under the Hood

When you prompt v0, it produces code that uses:

• React (functional components with hooks)
• Tailwind CSS (utility-first styling)
• shadcn/ui (Radix UI primitives + Tailwind styling)
• TypeScript (type-safe props and interfaces)
• Next.js conventions (App Router, Server Components when appropriate)

This isn't a random tech choice. It's the most popular production stack in the React ecosystem in 2026, which means v0's output slots directly into most modern projects without adaptation.

🎯 Getting Started: Your First Component in 60 Seconds

Step 1: Open v0

Head to v0.app and sign in with your Vercel account. You'll land in a clean chat interface -- no complex UI to navigate.

Step 2: Write Your Prompt

Type what you want. For your first spin, try something concrete:

A responsive pricing table with three tiers: Free, Pro, and Enterprise.
Each tier should have a name, price, feature list with checkmarks,
and a CTA button. The Pro tier should be visually highlighted.

Step 3: Review the Output

v0 generates the component and renders a live preview right in the browser. You'll see the actual component running, not just code. The generated code looks something like this:

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Check } from "lucide-react"

const tiers = [
  {
    name: "Free",
    price: "$0",
    description: "For side projects and experiments",
    features: ["5 projects", "Basic analytics", "Community support"],
    cta: "Get Started",
    highlighted: false,
  },
  {
    name: "Pro",
    price: "$29",
    description: "For professional developers",
    features: ["Unlimited projects", "Advanced analytics", "Priority support", "Custom domains", "API access"],
    cta: "Upgrade to Pro",
    highlighted: true,
  },
  {
    name: "Enterprise",
    price: "Custom",
    description: "For teams and organizations",
    features: ["Everything in Pro", "SSO & SAML", "Dedicated support", "SLA guarantee", "Custom integrations"],
    cta: "Contact Sales",
    highlighted: false,
  },
]

export default function PricingTable() {
  return (
    <div className="grid gap-6 md:grid-cols-3 max-w-5xl mx-auto p-6">
      {tiers.map((tier) => (
        <Card
          key={tier.name}
          className={tier.highlighted ? "border-primary shadow-lg scale-105" : ""}
        >
          <CardHeader>
            <CardTitle>{tier.name}</CardTitle>
            <CardDescription>{tier.description}</CardDescription>
            <p className="text-3xl font-bold mt-2">{tier.price}</p>
            {tier.price !== "Custom" && <span className="text-muted-foreground">/month</span>}
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              {tier.features.map((feature) => (
                <li key={feature} className="flex items-center gap-2">
                  <Check className="h-4 w-4 text-primary" />
                  {feature}
                </li>
              ))}
            </ul>
          </CardContent>
          <CardFooter>
            <Button className="w-full" variant={tier.highlighted ? "default" : "outline"}>
              {tier.cta}
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}

Step 4: Iterate

Don't like the layout? Tell v0 in plain English:

Make the Pro card have a gradient background from indigo to purple.
Add a "Most Popular" badge above the Pro tier.
Make the price text larger and add annual pricing as a toggle.

v0 remembers the conversation context and modifies the existing component rather than starting from scratch.

Step 5: Export to Your Project

Click "Add to codebase" and v0 generates an npx command:

npx v0 add https://v0.app/t/your-generation-id

Run that in your Next.js project root, and the component files land in your codebase with all necessary shadcn/ui dependencies installed automatically.

🧠 Prompt Engineering That Actually Works

The difference between a mediocre v0 output and a production-ready one is almost entirely in the prompt. Here's the framework that consistently produces the best results.

The Three-Part Prompt Formula

Every effective v0 prompt includes:

1. What you're building (the component type)
2. Who uses it and when (context and purpose)
3. How it should look and behave (design constraints)

Bad vs. Good Prompts

Technique 1: Reference Existing Products

v0 understands design language from popular products. Using references saves you paragraphs of description:

A settings page like Notion's. Left sidebar with categories,
right panel showing the active section. Use muted backgrounds
and clean typography.

Technique 2: Specify the Component Library

When you name specific shadcn/ui components, v0 uses them correctly:

Build a command palette using shadcn's Command component.
Include file search, recent documents, and keyboard shortcut hints.
Support Cmd+K to open.

Technique 3: Upload a Screenshot

This is v0's secret weapon. Upload a screenshot or Figma mockup and v0 will reverse-engineer the design into functional React code. The quality is surprisingly good -- it captures layout, spacing, color relationships, and component hierarchy.

Here's a screenshot of our current landing page hero section.
Recreate this in React with Tailwind. Keep the same layout
but modernize the typography and add subtle animations.

Technique 4: Iterate in Layers

Start broad, then refine. Don't try to specify everything in one prompt:

# Prompt 1: Structure
"A blog post page with title, author info, content area, and table of contents sidebar"

# Prompt 2: Styling
"Make the TOC sticky on scroll. Add a reading progress bar at the top."

# Prompt 3: Polish
"Add smooth scroll to TOC links. Highlight the active section in the TOC."

🔌 Integrating v0 Output Into Your Codebase

Generating pretty components is fun. Making them work in a real project is where the value is.

Method 1: The v0 CLI (Recommended)

The fastest path from v0 to your codebase:

# In your Next.js project root
npx v0 add https://v0.app/t/your-generation-id

This command:
- Downloads the component files
- Installs any missing shadcn/ui dependencies
- Places files in the correct directory structure
- Updates your components.json if needed

Method 2: Manual Copy

If you're not using Next.js or prefer manual control:

1. Click the Code tab in v0's output
2. Copy the component code
3. Create the file in your project (e.g., components/pricing-table.tsx)
4. Install missing dependencies:

# Install shadcn/ui components used by the generated code
npx shadcn@latest add card button
npm install lucide-react

Method 3: Figma-to-v0-to-Code Pipeline

For teams with designers, this workflow is gold:

┌──────────┐     ┌──────────┐     ┌──────────┐     ┌──────────┐
│  Figma   │────►│   v0     │────►│  Review  │────►│ Codebase │
│  Design  │     │  Import  │     │  & Edit  │     │  Export   │
└──────────┘     └──────────┘     └──────────┘     └──────────┘

1. Export your Figma frame or upload the Figma file directly to v0
2. v0 extracts layout, colors, typography, and component structure
3. Refine the generated code with follow-up prompts
4. Export to your project with the CLI

Working with Custom Design Systems

v0 isn't locked to its defaults. You can configure it to match your team's design system:

// tailwind.config.ts - v0 respects custom configs
{
  "theme": {
    "extend": {
      "colors": {
        "brand": {
          "50": "#f0f9ff",
          "500": "#3b82f6",
          "900": "#1e3a5f"
        }
      },
      "fontFamily": {
        "sans": ["Inter", "sans-serif"]
      }
    }
  }
}

Upload your tailwind.config.ts to v0 as a Design System, and all subsequent generations will use your custom tokens, colors, and spacing values instead of the defaults.

💰 Pricing: What You'll Actually Spend

v0 moved to credit-based pricing in 2025. Every generation, edit, and API call consumes credits based on token usage. Here's the reality:

How Credits Get Consumed

Credits are based on token consumption -- both your input prompt and v0's generated output count:

In practical terms:
- Simple component (button, card): ~$0.10-0.25 per generation
- Complex component (dashboard, data table): ~$0.50-1.00 per generation
- Multi-turn conversation (5-10 iterations): ~$2.00-5.00 total

The free tier's $5 in monthly credits gets you roughly 20-40 component generations -- enough to evaluate the tool seriously, not enough for daily production use. Credits reset monthly and don't roll over.

Is It Worth $20/Month?

If you build React UIs professionally, yes. A single well-generated component that would take you 45 minutes to build manually pays for an entire month's subscription. The math only gets better if you're iterating on designs or prototyping rapidly for clients.

If you build UIs occasionally, the free tier is genuinely useful for a few components per month.

⚔️ v0 vs The Competition

v0 doesn't exist in a vacuum. Here's how it stacks up against the other major AI UI tools in 2026:

When to Use What

• Choose v0 when you need beautiful React components fast, your project already uses Next.js/shadcn/ui, or you're converting Figma designs to code
• Choose Bolt.new when you need a full-stack prototype with backend logic, API routes, and database -- all running in the browser
• Choose Lovable when you're non-technical and want a complete working app from a description, or need enterprise compliance out of the box
• Choose Cursor when you're editing existing code across multiple files and need an AI that understands your whole repository

Many developers use v0 for component generation alongside Cursor or Claude Code for everything else. Different tools for different jobs.

🔧 Common Pitfalls and How to Fix Them

"v0 generated a component but it looks nothing like what I described."
Your prompt was too vague. Add specific details: mention colors, spacing, specific shadcn/ui components, and reference a product whose design you like. "A dashboard" gets you generic output. "An analytics dashboard like Linear with a dark sidebar and metric cards showing MRR, churn, and active users" gets you something usable.

"The component works in v0's preview but breaks in my project."
Check that your project has the required shadcn/ui components installed. Run npx shadcn@latest add [component-name] for each missing component. Also verify your tailwind.config.ts includes the content paths for shadcn/ui.

"I'm burning through credits too fast."
Three fixes: (1) Plan your prompt before typing -- don't iterate on vague ideas in v0, sketch them on paper first. (2) Use the Standard model for initial explorations and switch to Advanced only for final polish. (3) Break complex UIs into smaller component prompts rather than generating everything at once.

"The generated code uses outdated patterns."
v0 occasionally generates class components or pages-router patterns. Add "Use React Server Components and the Next.js App Router" to your prompt. You can also set this as a default in your Design System configuration.

"Figma imports look off compared to the original design."
Break your Figma file into sections. Full-page imports lose fidelity because v0 has to make too many interpretation decisions at once. Import the navbar, hero, feature grid, and footer separately, then compose them in your codebase.

🚀 What's Next

• Start with the free tier. The $5 monthly credit gets you enough generations to evaluate whether v0 fits your workflow. Sign up at v0.app and build something real.
• Master the prompt formula. The what/who/how framework covered above will get you 80% of the way to production-ready output. Practice on components you'd normally build by hand and compare the results.
• Combine v0 with a coding agent. Generate your UI in v0, export it to your codebase, then use Claude Code or Cursor to wire up the logic, API calls, and state management. This is the fastest prototyping workflow in 2026.
• Explore Design Mode. v0's visual editor lets you tweak colors, spacing, and typography without writing prompts. It's especially useful for non-destructive refinement after the initial generation.
• Read our comparison of AI Coding Agents for a full breakdown of how v0 fits into the broader developer tooling landscape.

For more on the AI-powered development trend behind tools like v0, read Vibe Coding Explained and our guide to Claude Code workflows for developers.