v0.dev Tutorial: Create Beautiful UIs with AI Prompts

v0.dev is Vercel's AI-powered UI generation tool. Unlike Bolt.new or Lovable which build complete applications, v0 focuses specifically on generating beautiful, production-ready React UI components from text descriptions. It outputs clean code using shadcn/ui and Tailwind CSS that you can drop directly into your Next.js project. For Indian developers who want professional-looking UIs without spending hours on design, v0 is a game-changer.

What You'll Learn

• How v0.dev works and what it generates
• Writing effective UI prompts
• Exporting components to your Next.js project
• Customizing v0 output for Indian-themed designs
• Free credits strategy for maximum value
• Advanced prompting techniques for complex UIs

How v0.dev Works

v0.dev uses AI models trained on thousands of UI patterns and the shadcn/ui component library. The workflow is:

1. You describe a UI in plain English
2. v0 generates the component as React + TypeScript + Tailwind CSS code
3. You see a live preview in the browser
4. You iterate with follow-up prompts to refine
5. You export the code to your project with npx shadcn add

What v0 Generates

All v0 output uses this stack:

• React 19 with functional components
• TypeScript with proper type definitions
• Tailwind CSS 4 for all styling
• shadcn/ui primitives (Button, Card, Dialog, Table, etc.)
• Lucide React icons
• Recharts for data visualizations

The code is clean, well-structured, and follows modern React best practices.

Getting Started

Create Your Account

1. Go to v0.dev
2. Sign in with your Vercel account or GitHub
3. You get 10 free generations per day immediately

Free vs Pro

| Feature | Free | Pro ($20/month) | |---------|------|-----------------| | Generations | 10/day (200/month) | Unlimited | | Priority | Queue-based | Immediate | | Private generations | No (public by default) | Yes | | Team sharing | No | Yes | | Models | Standard | Latest models |

Budget tip for Indian developers: 10 free generations per day is 200-300 per month. If you plan your prompts carefully and iterate rather than starting from scratch, the free tier is sufficient for most personal and college projects.

Your First v0 Generation

Example 1: A Pricing Card

Type this prompt into v0.dev:

Create a pricing card component for an Indian SaaS product.

- 3 tiers: Free, Pro (₹499/month), Enterprise (₹1,999/month)
- Each card shows: plan name, price, feature list (6 items), CTA button
- The Pro plan is highlighted with a "Most Popular" badge
- Use a clean, modern design with rounded corners and subtle shadows
- The CTA button should be saffron (#FF9933) for the Pro plan
- Include a monthly/annual toggle that shows 20% discount on annual

v0 generates three beautifully-styled pricing cards with working toggle logic, Indian Rupee formatting, and the saffron accent color.

Example 2: A Dashboard Layout

Create a dashboard layout with:
- Left sidebar (240px) with navigation items: Dashboard, Analytics,
  Users, Settings, each with an icon
- Top bar with search input, notification bell with badge, and user
  avatar dropdown
- Main content area with a 2x2 grid of stat cards showing:
  Total Users (12,450), Revenue (₹45,23,000), Orders (3,847),
  Growth (+23%)
- Below the cards: a line chart showing monthly revenue and a
  recent orders table with 5 rows
- Dark mode design with #0F172A background

v0 produces a complete dashboard with working navigation, responsive layout, formatted Indian numbers, and interactive chart.

Writing Effective Prompts for v0

The quality of your prompt directly determines the quality of the output. Here is how to write prompts that produce professional results.

Be Specific About Layout

# Vague (produces generic output):
Create a hero section

# Specific (produces professional output):
Create a hero section with:
- Split layout: left side has headline, subtext, and 2 CTA buttons;
  right side has a 3D illustration placeholder (400x400px)
- Headline: "Build Faster with AI" in 48px bold
- Subtext: 20px, gray-400, max-width 500px
- Primary CTA: "Get Started Free" — filled saffron button
- Secondary CTA: "Watch Demo" — outlined button with play icon
- Background: subtle gradient from slate-950 to slate-900
- Responsive: stack vertically on mobile

Specify Colors and Brand

Use this color scheme:
- Primary: saffron #FF9933
- Secondary: navy #000080
- Accent: green #138808
- Background: #0F172A
- Card surface: #1E293B
- Text: white #F8FAFC, muted #94A3B8

Reference Real Products

v0 understands design references:

Create a sidebar navigation similar to Linear's sidebar design.
Dark background, collapsible groups, keyboard shortcut hints next
to each item, and a user avatar at the bottom.

Create a command palette like Vercel's Cmd+K dialog. Search input
at top, recent items section, navigation section, and keyboard
hints. Animate in with a scale and fade effect.

Describe Interactions

When hovering on a card, slightly lift it with a shadow increase.
When clicking the "Details" button, open a slide-over panel from
the right showing full details. The panel should have a close button
and a dark overlay behind it.

Exporting to Your Project

Method 1: npx Command (Recommended)

v0 generates an install command for each component:

npx shadcn@latest add "https://v0.dev/chat/b/abc123"

This command:

1. Downloads the component code
2. Installs required shadcn/ui primitives
3. Places the component in your components/ directory
4. Adds any necessary dependencies to package.json

Method 2: Copy Code

Click the "Code" tab in v0 to see the full source. Copy and paste it into your project. You need to ensure the required shadcn/ui components are already installed:

# Install the primitives your component uses
npx shadcn@latest add button card badge dialog table

Method 3: Download as File

Click the download button to get the component as a .tsx file. Drop it into your components directory.

Setting Up shadcn/ui in Your Project

If your project does not have shadcn/ui yet:

# Initialize shadcn/ui in a Next.js project
npx shadcn@latest init

# Choose your options:
# - TypeScript: Yes
# - Style: Default or New York
# - Base color: Slate (matches dark themes)
# - CSS variables: Yes

This creates a components/ui/ directory and configures Tailwind CSS for shadcn components.

Customizing v0 Output

Adapting Colors

v0 uses CSS variables for colors. Modify them in your globals.css:

:root {
  --primary: 24 95% 53%;       /* Saffron */
  --secondary: 240 100% 25%;   /* Navy */
  --accent: 135 85% 28%;       /* Green */
  --background: 222 47% 11%;   /* Dark base */
  --card: 217 33% 17%;         /* Surface */
}

Adding Indian-Specific Formatting

v0 generates standard formatting. Add Indian-specific utilities:

// lib/format.ts

// Format number in Indian numbering system (lakhs/crores)
export function formatINR(amount: number): string {
  return new Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR',
    maximumFractionDigits: 0,
  }).format(amount);
}

// Format date in DD/MM/YYYY
export function formatDateIN(date: Date): string {
  return new Intl.DateTimeFormat('en-IN', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
  }).format(date);
}

Making Components Responsive for Indian Mobile Users

Over 70% of Indian internet users access the web on mobile. Ensure v0 output is mobile-friendly:

Add to your prompt:
"Ensure the component is fully responsive. On mobile (< 640px),
stack elements vertically, reduce padding, and make buttons full-width.
Target viewport widths: 360px (budget phones), 390px (mid-range),
and 430px (premium)."

Advanced Prompting Techniques

Multi-Step Generation

For complex pages, generate in steps:

1. Step 1: Generate the layout skeleton
2. Step 2: Generate individual complex components (charts, tables)
3. Step 3: Compose them together

Using Images as Prompts

v0 supports image input. Upload a screenshot or design mockup:

Recreate this UI from the uploaded screenshot.
Use shadcn/ui components, Tailwind CSS, and TypeScript.
Match the layout, colors, and spacing as closely as possible.

This is incredibly useful when you have a Figma design and want to convert it to code quickly.

Generating Form Components

Forms are common in Indian applications:

Create a KYC verification form with:
- Full Name (text input)
- PAN Card Number (10-char alphanumeric, auto-uppercase, format: ABCDE1234F)
- Aadhaar Number (12 digits, formatted as XXXX XXXX XXXX)
- Date of Birth (date picker, DD/MM/YYYY format)
- Address (textarea)
- State dropdown (all Indian states and UTs)
- PIN Code (6 digits, auto-lookup city from API)
- Document upload (Aadhaar front/back, PAN card image)
- Submit button with loading state
- Real-time validation with error messages below each field

v0 generates a fully validated form with proper Indian format handling.

v0.dev in Your Workflow

The best workflow combines v0 with other tools:

1. Design in v0 — Generate UI components quickly
2. Export to your project — Use the npx command
3. Add logic in Cursor — Use Cursor for business logic and API integration
4. Connect backend with Claude Code — Use Claude Code for complex backend work

This combination lets you move from idea to production UI extremely fast.

Community Generations

v0.dev has a community section where you can browse other people's generations (free tier generations are public). This is useful for:

• Learning prompt techniques — See what prompts produce good results
• Finding starting points — Fork an existing generation and modify it
• Exploring UI patterns — Browse designs for dashboards, landing pages, forms

Search for terms like "Indian dashboard", "fintech UI", or "dark theme admin" to find relevant designs.

Where to Go Next

• Bolt.new tutorial — build full apps — When you need more than UI components
• Best .cursorrules templates — Configure AI for your project conventions
• What is vibe coding? — The movement behind AI-first development
• UI generation with v0.dev (deep dive) — More advanced patterns

v0.dev has fundamentally changed how developers approach UI development. Instead of spending hours translating designs into code, you describe what you want and get production-ready components in seconds. Combined with shadcn/ui's excellent design system, the output is genuinely professional. Use the free tier strategically — plan your prompts, iterate on generations instead of starting fresh, and you will build beautiful interfaces without burning through your daily credits.