v0 by Vercel: Prompt Patterns That Generate Production UI

Why this matters

v0 by Vercel is a generative UI tool built directly on top of shadcn/ui and Tailwind CSS. Describe a screen, paste a screenshot, or reference a component — and v0 writes clean, copy-paste React that fits straight into a Next.js codebase.

The catch: most builders treat it like a search box. They type "pricing page" or "dashboard" and get a generic scaffold they spend the next hour wrestling into shape. The builders who move fast have internalized a small set of prompting patterns. This guide covers those patterns.

v0 is excellent at: polished marketing pages, component-level UI (cards, tables, forms, nav), and admin dashboards in shadcn. It's less suited to backend logic, complex state machines, or deep business rules. Know the tool's lane and you'll extract real value every session.

The setup

Sign in at v0.app ↗ with your Vercel account. No project setup, no config — a single prompt box. v0 outputs React components using shadcn/ui primitives, Tailwind utility classes, and TypeScript props. You're not generating a full app; you're generating composable, typed UI blocks you drop into an existing Next.js codebase.

Step 1: Frame the layout in plain English

The single biggest lever in v0 prompting is layout specificity. Don't name the screen — describe the structure.

Weak: "Create a settings page"

Strong:

Create a settings page layout with a left sidebar (240px, sticky)
that lists sections: Account, Billing, Notifications, Security.
The main content area renders one section at a time. Each section
has a title, a short description, and a form. Use shadcn/ui Card
for each section container. Tailwind, TypeScript props. No backend.

The strong version tells v0 exactly what to render: sidebar width, section list, content structure, wrapper component, and constraints. v0 fills in the visual polish — you supply the product logic. This single habit cuts your iteration count in half.

For dashboards, name every widget in the layout. "Three stat cards at the top (total revenue, active users, churn rate), then a full-width line chart, then a table with recent orders below" generates a working dashboard skeleton on the first shot.

Step 2: Anchor to shadcn primitives

v0 knows every shadcn/ui component by name. Referencing them explicitly forces v0 to use the right primitive instead of inventing something similar.

Here's the pattern:

Build a team member card component. Use shadcn Avatar for the photo,
Badge for the role label (variant="secondary"), and a Button
(variant="outline", size="sm") for the "View Profile" action.
Card wrapper with CardHeader, CardContent layout. Props: name,
role, avatarUrl, onViewProfile callback.

Naming Avatar, Badge, Button, Card, CardHeader, and CardContent directly means your output uses the exact primitives already in your design system. You get consistent styling, consistent behavior, and components that look native to the rest of your app without any cleanup.

For multi-component pages, list the primitives per section. "Use DataTable for the orders list, Select for the status filter, and a Sheet for the detail drawer" gives v0 a complete component map before it starts writing.

If you're building a system around shadcn from scratch, shadcn UI for AI builders covers the fundamentals.

Step 3: Iterate and lock in variants

Once you have a solid base component, v0 is excellent at generating variants in the same thread. Ask for multiple states up front — don't generate one and exit.

Now generate three variants of this pricing card:
1. A highlighted "Popular" version with a ring border and a "Most Popular" badge
2. An enterprise tier with a "Contact Sales" button instead of a price
3. A compact version for mobile with reduced padding and a smaller font size

Keep the same TypeScript props — add a `variant` prop that switches between them.

This pattern is where v0 separates itself from other tools. Getting three production-quality component variants with a unified prop interface in one shot is a real time save. Bolt and Lovable are strong for full-stack app scaffolding, but neither matches v0's precision when you're generating a polished component library — compare the approaches in v0 vs Bolt and Lovable vs v0.

For color and typography tokens, paste them in: "Use these CSS variables for brand tokens: --brand-primary: #5B21B6, --brand-surface: #F5F3FF". v0 applies them consistently across every component it generates in that thread.

Step 4: Drop into your codebase

v0's output is copy-paste ready. Each component uses the same shadcn primitives your app already has — no dependency conflicts.

Drop-in flow: copy the code from the v0 sidebar, paste it into components/ as a .tsx file, verify the @/components/ui/ import paths match your setup, then wire in your real data props. For larger outputs, "Open in Cursor" exports the whole thread. v0 handles UI only — backend logic and server actions are yours to add.

Common mistakes

Prompting for features instead of UI. "Add email authentication" is not a v0 prompt — that's a Bolt prompt. v0 thinks in components and layouts, not features.

Starting a new chat for each variation. Keep iterations in the same thread. v0 carries visual context between messages, so "make the table more compact" actually works because it knows what table you mean.

Ignoring the image input. You can paste a Figma screenshot, a competitor UI, or a hand-drawn sketch directly into v0. This is one of its most underused features — "match this layout but use shadcn components" produces far more accurate output than describing the same layout in text.

Expecting v0 to generate the right data shape. v0 invents placeholder props and mock data. Always replace mock arrays and hardcoded strings with your real data types before shipping.

Not checking dark mode. v0 adds Tailwind dark mode classes by default. If your app doesn't have class="dark" toggling set up, those styles appear but never activate — remove them or wire up the toggle.

What's next

The loop is: frame the layout precisely, anchor to named shadcn components, generate variants in one thread, then copy directly into your codebase. That's it.

Where to go from here: if you need a full-stack app around the UI components v0 just generated, Bolt's complete guide picks up where v0 leaves off. For building a design system with AI tooling from the ground up, shadcn UI for AI builders goes deeper on the component primitives v0 uses under the hood.