v0 by Vercel Has Free AI-Generated UI — Here's How to Build React Components with a Prompt

Designing UI is slow. v0 by Vercel generates production-ready React components from text descriptions — using shadcn/ui and Tailwind.

What is v0?

v0 is an AI tool by Vercel that generates React UI components from natural language prompts. It produces clean code using shadcn/ui, Tailwind CSS, and Radix UI.

How It Works

1. Describe what you want in plain English
2. v0 generates multiple variations
3. Pick one, iterate with follow-up prompts
4. Copy the code into your project

Example Prompts

"A pricing page with 3 tiers, monthly/annual toggle, and a highlighted popular plan"

"A dashboard sidebar with collapsible sections, user avatar at bottom, and dark mode"

"A data table with sorting, filtering, pagination, and row selection checkboxes"

"A file upload dropzone with progress bars and preview thumbnails"

"A multi-step form wizard with progress indicator and validation"

What You Get

// v0 generates production-ready code like this:
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Check } from "lucide-react";

export function PricingCards() {
  return (
    <div className="grid gap-6 lg:grid-cols-3 lg:gap-8">
      <Card>
        <CardHeader>
          <CardTitle>Starter</CardTitle>
          <CardDescription>For individuals</CardDescription>
          <div className="text-4xl font-bold">$9<span className="text-sm font-normal">/mo</span></div>
        </CardHeader>
        <CardContent>
          <ul className="space-y-2">
            <li className="flex items-center gap-2"><Check className="h-4 w-4" /> 5 projects</li>
            <li className="flex items-center gap-2"><Check className="h-4 w-4" /> 10GB storage</li>
          </ul>
        </CardContent>
        <CardFooter>
          <Button className="w-full" variant="outline">Get Started</Button>
        </CardFooter>
      </Card>
      {/* More cards... */}
    </div>
  );
}

Free Tier

• 200 generations/month
• Code export
• shadcn/ui components
• Tailwind CSS styling

v0 vs Building from Scratch

Approach	Time	Quality
v0 + iteration	5-10 min	Production-ready
Figma + hand-code	2-4 hours	Production-ready
From scratch	4-8 hours	Varies

Tips for Better Results

1. Be specific about layout (grid, sidebar, header)
2. Mention the component library (shadcn/ui, Radix)
3. Describe interactions (hover states, animations)
4. Reference real products (like Stripe's pricing page)
5. Iterate — v0 improves with follow-up prompts

---

Need data to populate your AI-generated UIs? Check out my Apify actors — structured data for any frontend. For custom solutions, email [e-mail].