v0 by Vercel Prompt Engineering Guide

v0 is Vercel's AI-powered UI generator that creates React components using shadcn/ui and Tailwind CSS. It excels at turning UI descriptions into copy-paste-ready code.

This guide will teach you how to write prompts that produce polished, accessible, and customizable components on the first try.

v0 generates components using a specific stack:

• React - Functional components with hooks
• shadcn/ui - Accessible, customizable component library
• Tailwind CSS - Utility-first styling
• Radix Primitives - Accessible headless components
• Lucide Icons - Beautiful, consistent icons

Understanding these constraints helps you write prompts that align with v0's capabilities. Reference specific shadcn/ui components when you want particular behaviors.

1. Describe the Visual Layout

Be specific about structure and spacing:

A card with:
- Header with icon (left) and title
- Description text below header
- Stats grid (3 columns) in the middle
- Action buttons (2) at the bottom right

2. Reference Design Inspirations

Mention sites or patterns you like:

A pricing table similar to Linear's or Vercel's pricing page.
Three tiers side by side, middle one highlighted as "popular".

3. Specify Interactive States

Describe hover, focus, and active states:

Cards should lift slightly on hover with a subtle shadow.
Selected cards have a purple border.
Buttons show loading spinner when clicked.

4. Include Dark Mode

v0 supports dark mode classes:

Design for both light and dark mode.
Dark mode: dark gray background, white text.
Light mode: white background, dark gray text.

5. Mention Accessibility Requirements

Ensure components are accessible:

The tabs should be keyboard navigable with arrow keys.
Include ARIA labels for screen readers.
Focus indicators should be visible.

Dashboard Cards

Create a stats card component showing:
- An icon in the top left
- A label (e.g., "Total Revenue")
- A large number value
- A trend indicator (up/down arrow with percentage)
- A mini sparkline chart on the right

The trend should be green for positive, red for negative.
Card should have subtle shadow and rounded corners.

Form Component

Build a multi-step form wizard with:
- Progress bar showing current step (3 steps total)
- Step 1: Personal info (name, email)
- Step 2: Preferences (select, checkboxes)
- Step 3: Review and submit

Include Next/Back buttons.
Show validation errors inline.
Animate transitions between steps.

Navigation

Create a responsive navigation header:
- Logo on the left
- Navigation links in center: Home, Features, Pricing, Blog
- Auth buttons on right: Login (text), Sign Up (filled)
- Mobile: hamburger menu that opens a slide-out drawer

Use shadcn Sheet for mobile menu.
Sticky on scroll with backdrop blur.

Data Table

Build a data table with:
- Column headers: Name, Status, Date, Amount, Actions
- Sortable columns (click header to sort)
- Status shown as colored badges
- Actions dropdown with Edit, Delete options
- Checkbox column for bulk selection
- Pagination at the bottom

Use shadcn Table and DropdownMenu components.

Responsive Design

Specify breakpoint behaviors:

Grid layout:
- Mobile (default): 1 column, full width cards
- Tablet (md): 2 columns
- Desktop (lg): 3 columns
- Large (xl): 4 columns

Animation Details

Describe specific animations:

Cards should:
- Fade in with slide up on mount (staggered)
- Scale slightly on hover (1.02)
- Have smooth transition (200ms ease-out)
Use Tailwind animation classes.

Complex Interactions

Break down multi-step interactions:

Drag and drop kanban board:
1. Three columns: Todo, In Progress, Done
2. Cards can be dragged between columns
3. Drop zone highlights when dragging over
4. New card animates into place after drop
5. Counter badge on each column header

Composition Patterns

Request composable components:

Create a Card component system:
- Card (container)
- CardHeader (icon, title, description)
- CardContent (flexible body)
- CardFooter (actions, metadata)

Each part should be independently usable.
Include TypeScript props interface.

Too Vague

Bad: "Make a nice card"

Good: "A card with header, 2-line description, image thumbnail, and two action buttons (secondary, primary)"

Ignoring Component System

Bad: "Build a modal"

Good: "Use shadcn Dialog to create a confirmation modal with a destructive action, Cancel and Delete buttons"

Missing States

Bad: "Button that submits form"

Good: "Submit button with hover state, loading spinner during submission, disabled when form is invalid"

No Dark Mode Consideration

Bad: "White card with black text"

Good: "Card with light/dark variants using Tailwind dark: classes"