Generate UI with v0.dev

Building beautiful UIs is one of the most time-consuming parts of web development. Even experienced developers spend hours tweaking layouts, color schemes, and responsive breakpoints. v0.dev by Vercel changes this — you describe a UI component in plain English, and it generates working React + Tailwind CSS code in seconds.

This guide shows you how to use v0.dev effectively, from your first prompt to integrating the generated code into a real project.

What You'll Learn

• What v0.dev is and how it works
• Writing effective prompts for UI generation
• Iterating on generated designs
• Copying code to your project (React/Next.js)
• shadcn/ui integration
• Free tier limits and when to upgrade

What Is v0.dev?

v0.dev is an AI UI generation tool by Vercel that converts plain English descriptions into production-ready React components with Tailwind CSS — fully compatible with Next.js and shadcn/ui projects.

The key difference between v0 and Bolt.new is scope. Bolt builds complete applications. v0 generates individual components and pages that you copy into an existing project. v0 is ideal when you have a project already set up and need specific UI pieces.

Free tier: Limited daily credits. Each generation uses credits. Free users get enough for 10-20 generations per day.

Free Deal: Vercel gives student and open-source accounts extra v0 credits. Sign up with your GitHub account (which should be connected to your .edu email if you are a student) for the maximum free allocation.

Why It Matters in India

Indian freelance developers often win projects based on how quickly they can deliver mockups. v0.dev compresses the design-to-code cycle from hours to minutes:

• Freelancers: Generate client UI mockups in minutes, not hours — win more projects
• Startups: Prototype multiple design directions at zero cost before committing to one
• Students: Learn modern React patterns by studying AI-generated code
• Agencies: Deliver initial wireframes and interactive prototypes faster

Practical cost saving: A UI designer in India charges ₹500-₹2,000/hour. A v0.dev component generation takes 30 seconds and is free. For a 10-component project, that is potentially ₹10,000-₹40,000 saved on design work.

Writing Your First Prompt

Go to v0.dev, sign in with GitHub, and type a description in the text box.

Example prompt — Dashboard card:

A stats dashboard card showing:
- Title: "Total Revenue"
- Value: "₹12,45,000"
- Change: "+12.5% from last month" in green
- A small sparkline chart
- Clean white background, subtle shadow, rounded corners

Hit generate. v0 produces multiple variants you can choose from.

Example prompt — Login form:

A login form for an Indian EdTech app with:
- Logo placeholder at top
- Email and password fields
- "Login with Google" button
- "Forgot password?" link
- Link to sign up
- Indian-style design with saffron (#FF9933) as primary color

Iteration and Refinement

v0 is conversational — you can refine the output by typing follow-up instructions:

• "Make the button larger and use a darker shade of orange"
• "Add a loading spinner state to the button"
• "Make it mobile-responsive — stack the two columns on small screens"
• "Change the font to Inter"
• "Add a dark mode variant"

Each follow-up instruction updates the component. You can go back to any previous version using the history panel on the left.

India Note: v0.dev works excellently for Indian-themed designs. Try prompts like "Use the Indian tricolor (saffron, white, green) as the color scheme" or "Add a Rupee symbol (₹) to all price displays." The model handles Indian currency and cultural design cues well.

Copying Code to Your Project

Once you are happy with a component, click the "Code" tab to see the generated code.

Option 1 — Direct copy: Copy the JSX code and paste it into a new file in your project. Make sure you have the required dependencies installed:

npm install tailwindcss @radix-ui/react-* lucide-react

Option 2 — CLI install (easiest): v0 provides a CLI command to install the component automatically:

npx v0 add [component-id]

This copies the component and installs all dependencies in one step.

Option 3 — Open in Bolt or CodeSandbox: Click "Open in Bolt" to take the component into a full development environment where you can test it and add functionality.

shadcn/ui Integration

v0 generates components using shadcn/ui — an open-source component library that has become the standard for React UI in 2026. If your project already uses shadcn/ui, v0's output integrates perfectly.

Setting up shadcn/ui in a new Next.js project:

npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init

Once set up, every v0 component you copy will work without modification.

v0.dev vs Other UI Generation Tools

| Tool | Best For | Free Tier | Code Quality | React Support | |------|----------|-----------|--------------|---------------| | v0.dev | React/shadcn components | 10-20/day | Excellent | Native | | Builder.io | CMS-driven sites | Limited | Good | Yes | | Framer AI | Marketing sites | Limited | Good | Export only | | Webflow AI | No-code websites | Limited | N/A (no-code) | No | | Locofy.ai | Figma to code | Limited | Good | Yes |

v0.dev wins on code quality for React/Next.js projects. For non-React or no-code use cases, the alternatives are better suited.

Prompt Templates for v0

Navigation bar:

A sticky navigation bar with logo on left, nav links in center (Home, Features, Pricing, Blog), and login/signup buttons on right. Clean minimal design with a white background and subtle bottom border.

Data table:

A data table showing a list of users with columns: Name, Email, Role, Joined Date, Status (Active/Inactive badge), Actions (Edit, Delete buttons). Include pagination and a search input at the top.

Pricing section:

A three-column pricing section for a SaaS product. Plans: Free (₹0), Pro (₹999/mo), Enterprise (Contact us). Highlight the Pro plan with a border and "Most Popular" badge. Each card shows 5 features with checkmarks.

Mobile-first product card:

A product card for an e-commerce app showing: product image, name, price in ₹, rating stars, "Add to Cart" button. Must look good on mobile screens. Use a modern card design with subtle hover effect.

UPI payment form:

A payment form with fields for amount in ₹, UPI ID input with @upi format hint, and a "Pay Now" button in green. Add a QR code placeholder. Clean, trustworthy design suitable for Indian fintech apps.

v0 vs Bolt.new — When to Use Each

Use v0.dev when:

• You have an existing Next.js/React project
• You need a specific component or page section
• You want to quickly prototype a UI design
• You need production-quality shadcn/ui components
• You want to study well-structured React code

Use Bolt.new when:

• You want a complete working application from scratch
• You have no existing codebase to work with
• You need backend logic, not just UI
• You want one-click deployment to share with others

Frequently Asked Questions

Can I take a screenshot of another website and have v0 recreate it? Yes. v0 accepts image uploads. Upload a screenshot and type "Create a React component that matches this design." The accuracy is high for clean, structured layouts.

Does v0.dev work with React Native or Flutter? No. v0.dev generates React web components only. For React Native UI generation, try Expo's AI tools or use v0 as a reference and manually adapt the layout logic.

How do I deploy a Next.js project with v0 components? Deploy to Vercel (the company behind v0.dev) — it is optimized for Next.js and the free tier is generous. Connect your GitHub repo and Vercel auto-deploys on every push. Indian users access Vercel's global CDN with fast response times.

Related Resources

• Build a Web App with Bolt.new — Build complete full-stack apps, not just UI components
• Build a No-Code Chatbot — Use v0 to design your chatbot's embed UI
• Sell Digital Products with AI — Sell v0-generated UI template packs as digital products

Official Resources

• v0.dev — Start generating UI components, free account required
• shadcn/ui — Component library used by v0's output
• v0.dev Changelog — Latest features and updates
• Vercel — Deploy your Next.js + v0 project for free
• Tailwind CSS Docs — Understand the CSS classes in generated code