v0.dev Tutorial: Generate React Components with AI

v0 is Vercel’s AI tool for generating React components. Describe what you want, get code you can use.

It’s not trying to build entire applications. It does one thing: UI components. And it does that thing remarkably well.

Here’s how to use it effectively.

What Is v0?

v0 (pronounced “v-zero”) is a generative UI tool. You describe a component in plain English, and it generates React code using shadcn/ui components and Tailwind CSS.

The output isn’t just a sketch or mockup. It’s production-ready code you can copy directly into your project.

Vercel built it to solve a specific problem: the gap between “I know what I want this to look like” and “I have code that makes it look that way.” For non-designers who can’t draw and developers who don’t want to write boilerplate CSS, it’s genuinely useful.

Getting Started

Go to v0.dev. You can start generating immediately without an account, but signing in gives you more generations and the ability to save your work.

The interface is minimal. There’s a text input where you describe what you want. Below that, your generated components appear.

That’s it. No complex setup. No installation.

Your First Component

Let’s generate something real.

Prompt:

A pricing table with three tiers: Basic, Pro, and Enterprise. Each tier shows the price, a list of features with checkmarks, and a call-to-action button. The Pro tier should be highlighted as recommended.

What v0 generates:

A complete pricing component with:

• Three cards side by side
• Proper typography hierarchy
• Feature lists with check icons
• Buttons styled appropriately
• The middle card highlighted with a “Recommended” badge
• Responsive design that stacks on mobile

The code uses shadcn/ui components (Card, Button, Badge) with Tailwind CSS for styling. It’s clean, readable, and follows React best practices.

Prompting Techniques That Work

After hundreds of generations, I’ve found patterns that get better results.

Be specific about layout:

Bad: “A contact form”

Good: “A contact form with name, email, and message fields. The name and email should be on the same row. Include a submit button aligned to the right.”

Layout details prevent guessing.

Reference real products:

“A user profile card like you’d see on Twitter/X. Profile picture on the left, name and username stacked, bio text, and follower/following counts.”

Real-world references give v0 a clear mental model.

Specify the visual style:

“A dashboard sidebar with navigation links. Use a dark theme with subtle hover effects. Icons next to each link. The active link should have a colored indicator.”

Don’t assume it knows your preferences.

Include edge cases:

“A search results list. Show 5 items with thumbnail, title, and description. Include an empty state when no results are found.”

Edge cases make your components production-ready.

What v0 Does Exceptionally Well

Design quality: The components look professional out of the box. Spacing, typography, and color choices are sensible. You don’t get that “obviously AI-generated” feel.

Accessibility: It includes proper ARIA labels, keyboard navigation support, and semantic HTML. Accessibility is built in, not bolted on.

Responsiveness: Mobile layouts work. It handles breakpoints intelligently without you specifying them.

shadcn/ui integration: If you’re already using shadcn/ui (and you probably should be), the components drop right in. No adaptation needed.

Variants: Ask for multiple versions and it generates alternatives. “Give me 3 different styles of this card” produces genuinely different options.

What It Struggles With

Complex interactivity: v0 generates UI, not full applications. A form will look right but won’t have real validation logic or API connections.

Custom animations: Basic hover effects work. Complex animations or transitions need manual refinement.

Data-heavy components: Tables with sorting, filtering, and pagination need more guidance. The visual is there, the logic isn’t.

Perfect pixel matching: If you need to exactly replicate a design file, you’ll still need manual adjustment. v0 interprets, it doesn’t copy.

Backend integration: There’s no backend. You get React components that display data, not components that fetch it.

The Workflow I Recommend

Here’s how to get the most out of v0:

Step 1: Generate the base component

Start with a clear description. Get something close to what you want.

Step 2: Iterate in v0

Use follow-up prompts to refine: “Make the buttons larger.” “Use a blue color scheme.” “Add more spacing between sections.”

Each iteration costs a generation, so be thoughtful, but don’t be afraid to iterate.

Step 3: Copy to your project

Once you’re happy, use the “Copy” button. The code goes to your clipboard.

Step 4: Adapt to your codebase

Paste into your project. Adjust imports for your project structure. Connect to real data. Add your own event handlers.

Step 5: Refine with your AI coding tool

Take the v0-generated component into Cursor, Claude Code, or whatever you use. Ask for the logic and integration work.

v0 is not a complete solution. It’s the fastest way to get from idea to visual component.

Real Examples

Here are prompts that have worked well for me:

Marketing hero section:

“A hero section for a SaaS landing page. Large headline on the left, product screenshot on the right. Include a subheadline, email signup form, and two social proof badges. Modern, clean design.”

E-commerce product card:

“An e-commerce product card with image, product name, price (with strikethrough for original price showing discount), star rating with review count, and add to cart button. Include a wishlist heart icon in the corner.”

Dashboard header:

“A dashboard header with logo on the left, search bar in the center, and user avatar with dropdown on the right. Include notification bell with a badge showing unread count.”

Settings form:

“A settings page layout with a sidebar navigation (Account, Security, Notifications, Billing) and main content area. Show the Account section active with form fields for name, email, and profile photo upload.”

Pricing

v0 has a free tier with limited generations per month. It’s enough to try the tool and generate basic components.

Paid plans start at $20/month for more generations. If you’re building UIs regularly, it pays for itself quickly in time saved.

For teams, there are collaborative features and higher limits.

v0 vs Other Options

vs Figma + manual coding: v0 is faster. If you can describe what you want, you skip the design tool entirely. But you lose pixel-perfect control.

vs copying from template sites: Templates are rigid. v0 generates exactly what you describe. Customization is built into the workflow.

vs full AI coding tools: Claude Code or Cursor can build components too, but v0 is specialized. The design quality is higher for UI-focused work. Use v0 for visuals, other tools for logic.

Tips for Advanced Use

Combine with screenshots:

You can upload images to v0. Show it a design and say “recreate this.” It won’t be perfect, but it gets you close.

Generate then customize:

Use v0 for the structure and visual design. Then manually add the details that make it yours.

Build a component library:

Generate all your standard components (buttons, cards, forms, modals) at once. Save them. Now you have a consistent library.

Iterate aggressively:

Don’t settle for the first generation. If something’s off, describe the problem. v0 handles feedback well.

The Bottom Line

v0 solves a real problem. If you’ve ever stared at a blank React file trying to remember how to structure a card component with proper spacing, v0 eliminates that friction.

It won’t build your application. It won’t write your business logic. But for the visual, presentational layer of your app, it’s the fastest path from idea to code.

Open v0, describe a component you need, and see what happens. If you’re building React applications, this tool deserves a spot in your workflow.