30 Best v0 Prompts for Building UI Faster
Copy-paste prompts for v0 by Vercel that generate production-ready React, Next.js, and Tailwind components — from landing pages and dashboards to forms, design systems, and iterative refinements.
In short: This page contains 30 copy-paste ready prompts, organized into 6 categories with a description and pro tip for each. The first 5 prompts are free instantly, no signup needed. Drafted with AI writing assistance and checked against our editorial policy.
Landing Pages
5 promptsSaaS Marketing Landing Page
1/30✨ What it does
v0 builds a full SaaS landing page for [PRODUCT NAME] with hero, features, pricing, and a footer in React and Tailwind. You fill [ONE-LINE DESCRIPTION OF WHAT IT DOES] and [ACCENT COLOR], then swap the placeholder copy before you ship.
<context> Product: [PRODUCT NAME] — [ONE-LINE DESCRIPTION OF WHAT IT DOES] Framework: Next.js App Router with TypeScript Styling: Tailwind CSS, shadcn/ui components, mobile-first responsive Target audience: [WHO IT IS FOR, e.g. busy marketing teams] Brand vibe: [e.g. modern, clean, trustworthy] with [ACCENT COLOR] as the accent </context> <task> Build a single-page marketing landing page with these sections in order: 1. Sticky header: logo placeholder on the left, nav links (Features, Pricing, Docs), and a primary CTA button on the right. 2. Hero: bold headline, supporting subheadline, two CTAs (primary + ghost), and a product screenshot placeholder. 3. Logo cloud: row of 5 grayscale customer-logo placeholders with a small caption. 4. Features: 3-column grid of cards, each with a Lucide icon, title, and short description. 5. Testimonial: a single large quote with avatar, name, and role. 6. Pricing: 3 tier cards (one highlighted as recommended) with feature lists and CTAs. 7. Footer: 4 link columns plus a newsletter email input. Make every section fully responsive (single column on mobile, multi-column on desktop). Use semantic HTML and accessible labels. </task>
Pro tip: After the first render, ask v0 to "make the hero match the screenshot I am uploading" to align it with your existing brand.
Product Waitlist / Coming Soon Page
2/30✨ What it does
v0 builds a single-screen waitlist page for [PRODUCT NAME] with a working email form, a Coming [TIMEFRAME] badge, and a success state. You plug in the launch window, then collect emails or restyle the dark theme.
<context> Product: [PRODUCT NAME], launching [TIMEFRAME] Goal: capture emails for a launch waitlist Framework: Next.js with TypeScript Styling: Tailwind CSS, dark theme, subtle gradient background </context> <task> Build a centered, single-screen waitlist page: 1. Small badge pill at the top reading "Coming [TIMEFRAME]". 2. Large headline and a one-sentence value proposition. 3. An inline email capture form (email input + "Join waitlist" button) with client-side validation and a success state that swaps the form for a "You are on the list" confirmation. 4. A small social-proof line showing "[NUMBER] people already joined". 5. Footer with social icon links. Make it look great on mobile and desktop, vertically centered, with a tasteful gradient and a subtle grid or noise background. </task>
Pro tip: Ask v0 to "wire the form to a server action that logs the email" so you get a functional submit handler, not just markup.
Feature Spotlight Section
3/30✨ What it does
v0 creates a reusable alternating feature section for [FEATURE NAME] driven by a typed props array. You write [WHAT IT DOES AND WHY IT MATTERS], then drop the block onto the landing page and add screenshots.
<context> Feature: [FEATURE NAME] — [WHAT IT DOES AND WHY IT MATTERS] Framework: React with TypeScript Styling: Tailwind CSS, light theme </context> <task> Build a reusable alternating feature section component: 1. Accept a prop array of features, each with { title, description, imageAlt, reverse }. 2. Render each feature as a two-column row: text on one side, image placeholder on the other, alternating sides when reverse is true. 3. Include a small eyebrow label above each title and a "Learn more" text link below each description. 4. On mobile, stack image above text for every row. Export it as a typed component and show one example usage with 3 features. </task>
Pro tip: Specify "reverse the image side on every other row" explicitly — v0 handles alternation more reliably when told the exact pattern.
Pricing Page with Monthly/Annual Toggle
4/30✨ What it does
v0 builds a pricing page for [PRODUCT NAME] with Starter, Pro, and Enterprise cards plus a monthly or annual toggle that updates each [PRICE]. You mark the recommended tier, then paste the real prices and feature lists.
<context> Product: [PRODUCT NAME] Plans: Starter [PRICE], Pro [PRICE], Enterprise (contact sales) Framework: Next.js with TypeScript Styling: Tailwind CSS, shadcn/ui </context> <task> Build a pricing page: 1. A centered heading and subheading. 2. A monthly/annual toggle (annual shows a "save 20%" badge) that updates the displayed prices via client state. 3. Three plan cards in a responsive grid; the middle plan is visually highlighted as "Most popular". 4. Each card: plan name, price, billing note, a checkmark feature list, and a CTA button. 5. Below the cards, a compact feature-comparison table that collapses to an accordion on mobile. Keep all prices in a single config object at the top so they are easy to edit. </task>
Pro tip: Tell v0 to "keep prices in one config object" so it does not hardcode values across multiple cards you would have to edit one by one.
Newsletter / Content Landing Page
5/30✨ What it does
v0 builds an editorial landing page for [NEWSLETTER NAME] with a subscribe form and a past-issues grid. You set [TOPIC AND WHO READS IT] in the hero, then wire the form to your list tool.
<context> Newsletter: [NEWSLETTER NAME] — [TOPIC AND WHO READS IT] Framework: Next.js with TypeScript Styling: Tailwind CSS, editorial / magazine feel, serif headings </context> <task> Build a newsletter landing page: 1. Hero with an editorial headline, description, and an email subscribe form with validation. 2. "What you get" section: 3 short benefit blurbs with icons. 3. A sample-issue preview card linking to the latest edition. 4. A grid of past issues (title, date, one-line summary) using placeholder data. 5. A final subscribe CTA band before the footer. Use a refined editorial type scale and generous whitespace. Fully responsive. </task>
Pro tip: Add "use a serif heading font and generous line-height" — v0 defaults to sans-serif, so name the editorial look you want.
Dashboards
5 promptsAnalytics Dashboard Layout
6/30✨ What it does
v0 lays out an analytics dashboard for [APP NAME] with a sidebar, KPI cards, charts, and a table as a working screen you can click in the chat. You replace the placeholder numbers with your metrics and keep the layout.
<context> App: [APP NAME] analytics dashboard Framework: Next.js App Router with TypeScript Styling: Tailwind CSS, shadcn/ui, light theme with a clean neutral palette Data: use realistic placeholder data </context> <task> Build an analytics dashboard page: 1. Persistent left sidebar with nav items (Overview, Reports, Customers, Settings) and an active state. 2. Top bar with a page title, a date-range selector, and a user avatar menu. 3. A row of 4 KPI stat cards (label, big number, percentage change with up/down arrow and color). 4. A primary area chart card spanning two columns plus a smaller bar chart card. 5. A recent-activity table with sortable column headers and pagination. Use recharts for charts. Make the sidebar collapse to a top nav on mobile. Keep components typed. </task>
Pro tip: Name your chart library ("use recharts") up front — otherwise v0 may pick a different one and you will refactor later.
Data Table with Filters and Search
7/30✨ What it does
v0 builds a data table for [ENTITY, e.g. customers] with search, filters, sorting, selection, and pagination. You list [LIST FIELDS, e.g. name, email, plan, status, createdAt], then hook the rows to your API.
<context> Entity: [ENTITY, e.g. customers] with fields [LIST FIELDS, e.g. name, email, plan, status, createdAt] Framework: React with TypeScript Styling: Tailwind CSS, shadcn/ui table </context> <task> Build a data-table component: 1. A search input that filters rows by name or email as the user types. 2. A status filter dropdown (All / Active / Inactive). 3. Sortable columns (click header to toggle asc/desc) with a sort indicator. 4. A status column rendered as a colored badge. 5. Row selection checkboxes with a "[N] selected" bulk-action bar. 6. Client-side pagination (10 per page) with page controls. Drive everything from a typed array of placeholder records and keep all filter/sort logic in local state. </task>
Pro tip: Ask for "URL-synced filters using searchParams" if you want filter state to survive refreshes and be shareable.
Settings Page with Tabbed Sections
8/30✨ What it does
v0 builds a tabbed settings page for [APP NAME] covering Profile, Account, Notifications, Billing, and a Danger Zone confirm. You connect each form to your backend, then try the delete dialog before anyone else can.
<context> App: [APP NAME] Framework: Next.js with TypeScript Styling: Tailwind CSS, shadcn/ui </context> <task> Build a settings page with vertical tabs: 1. Tabs: Profile, Account, Notifications, Billing, Danger Zone. 2. Profile tab: avatar upload placeholder, name and bio fields, Save button. 3. Notifications tab: a list of toggle switches with labels and helper text. 4. Billing tab: current plan summary card and a "Manage subscription" button. 5. Danger Zone tab: a destructive "Delete account" action behind a confirmation dialog. Keep the active tab in state, show a saving spinner on submit, and make tabs stack on top on mobile. </task>
Pro tip: Mention "confirmation dialog for destructive actions" explicitly so v0 guards the delete action instead of firing it instantly.
Admin Sidebar Navigation Shell
9/30✨ What it does
v0 generates a collapsible admin shell for [APP NAME] with a dark sidebar, header, and a children slot as a working screen you can click in the chat. You drop your pages into that slot and highlight the active route.
<context> App: [APP NAME] admin panel Framework: Next.js App Router with TypeScript Styling: Tailwind CSS, shadcn/ui, dark sidebar with light content area </context> <task> Build a reusable dashboard layout shell: 1. A collapsible left sidebar with grouped nav sections, icons, labels, and an active-route highlight. 2. A collapse toggle that shrinks the sidebar to icons only and persists the state. 3. A top header with breadcrumbs, a global search, notifications bell, and avatar menu. 4. A main content slot that accepts children. 5. On mobile, the sidebar becomes a slide-in drawer triggered by a hamburger button. Export it as a layout component wrapping {children}, fully typed and responsive. </task>
Pro tip: Ask v0 to "use this as app/(dashboard)/layout.tsx" so it scopes the shell to a route group instead of every page.
Stat Cards Row with Trends
10/30✨ What it does
v0 builds a responsive row of KPI cards from [LIST 4 METRICS, e.g. Revenue, Active Users, Conversion Rate, Churn], each with a colored delta and sparkline. You pass real values, then place the row at the top of the dashboard.
<context> Metrics: [LIST 4 METRICS, e.g. Revenue, Active Users, Conversion Rate, Churn] Framework: React with TypeScript Styling: Tailwind CSS </context> <task> Build a responsive row of KPI stat cards: 1. Accept a typed prop array of { label, value, deltaPercent, sparkline }. 2. Each card shows the label, the large formatted value, and a delta badge that is green with an up arrow when positive and red with a down arrow when negative. 3. Render a small inline sparkline (recharts area or svg) at the bottom of each card. 4. Lay out 4 cards in a row on desktop, 2x2 on tablet, single column on mobile. Format large numbers compactly (e.g. 12.4k) via a helper. </task>
Pro tip: Provide example values in your placeholders — v0 picks better number formatting when it sees realistic sample data.
Components
5 promptsReusable Modal / Dialog Component
11/30✨ What it does
v0 builds an accessible modal with focus trapping, Escape and backdrop close, and an animated overlay. You pass title, description, and footer, then open it from the button that needs a confirm.
<context> Framework: React with TypeScript Styling: Tailwind CSS, shadcn/ui Dialog primitives </context> <task> Build an accessible reusable modal component: 1. Props: open, onOpenChange, title, description, footer slot, and children. 2. Trap focus inside the dialog, close on Escape and on backdrop click. 3. Animate the overlay fade and the content scale/translate in and out. 4. Lock body scroll while open. 5. Provide a default footer with Cancel and Confirm buttons when no footer slot is passed. Show one usage example that opens the modal from a button and confirms an action. Keep it fully typed and a11y-compliant (aria-labelledby, aria-describedby). </task>
Pro tip: Say "use shadcn/ui Dialog primitives" so v0 builds on Radix accessibility instead of a hand-rolled overlay.
Multi-Step Wizard Component
12/30✨ What it does
v0 builds an [N]-step wizard for [WHAT THE WIZARD DOES, e.g. onboarding setup] with a progress bar, Next and Back, and shared state. You write the fields for each step, then block Next until that step validates.
<context> Flow: [WHAT THE WIZARD DOES, e.g. onboarding setup] in [N] steps Framework: React with TypeScript Styling: Tailwind CSS </context> <task> Build a multi-step wizard component: 1. A progress indicator showing all steps with the current one highlighted and completed ones checked. 2. Next / Back navigation; Back is hidden on step one and Next becomes Finish on the last step. 3. Per-step validation that blocks advancing until the current step is valid. 4. Maintain collected data across steps in a single typed state object. 5. Smooth transition animation between steps. Include [N] placeholder step components and an onComplete callback that receives the full data object. </task>
Pro tip: Tell v0 the exact number of steps and what each collects — vague step counts produce generic, hard-to-reuse stepper code.
Toast / Notification System
13/30✨ What it does
v0 builds a toast system with a provider, a useToast hook, and success, error, info, and warning variants that auto-dismiss. You wrap the app in the provider, then fire toasts from save and error paths.
<context> Framework: Next.js with TypeScript Styling: Tailwind CSS </context> <task> Build a toast notification system: 1. A ToastProvider with context and a useToast hook exposing toast({ title, description, variant }). 2. Variants: success, error, info, warning — each with its own icon and color. 3. Toasts stack in the bottom-right, auto-dismiss after 4 seconds, and can be dismissed manually. 4. Animate toasts sliding in and out. 5. Cap the visible stack at 3 and queue the rest. Show a demo page with four buttons that each trigger a different variant. Fully typed. </task>
Pro tip: If you already use shadcn/ui, add "use the existing sonner/toast setup" so v0 does not duplicate a parallel system.
Command Palette (Cmd+K)
14/30✨ What it does
v0 builds a command palette for [APP NAME] that opens on Cmd+K, with fuzzy search and grouped Navigation, Actions, and Settings. You fill the action list, then bind each row to a real route or command.
<context> App: [APP NAME] Framework: Next.js with TypeScript Styling: Tailwind CSS, shadcn/ui Command component </context> <task> Build a command palette: 1. Open on Cmd+K / Ctrl+K and close on Escape. 2. A fuzzy-searchable list of actions grouped by category (Navigation, Actions, Settings). 3. Full keyboard navigation with arrow keys and Enter to select; show the selected item highlighted. 4. Each item has an icon, label, and optional keyboard shortcut hint on the right. 5. Selecting an item runs its onSelect callback and closes the palette. Drive items from a typed config array so new commands are easy to add. </task>
Pro tip: List your real command groups in the prompt — v0 wires up the keyboard handling well, but only fills in placeholder commands unless you specify them.
Empty State Component
15/30✨ What it does
v0 builds an empty-state block for [WHERE IT APPEARS, e.g. an empty projects list] with icon, title, and primary plus optional secondary actions. You wire the buttons to create or import, then show it when the list is empty.
<context> Context: [WHERE IT APPEARS, e.g. an empty projects list] Framework: React with TypeScript Styling: Tailwind CSS </context> <task> Build a reusable empty-state component: 1. Props: icon, title, description, primary action (label + onClick), and optional secondary action. 2. Center the content with a soft illustration or icon at the top. 3. Keep generous vertical padding so it fills the available container nicely. 4. Support a compact variant for use inside smaller cards. Show two usage examples: a full-page empty state and a compact in-card one. Fully typed and responsive. </task>
Pro tip: Ask for "a compact variant" up front so the same component works in both full-page and in-card contexts without a rewrite.
Like these prompts? There are full tutorials behind them.
Learn the workflows, not just the prompts. Easy-to-follow tutorials inside AI Academy, and the library keeps growing.
Forms
5 promptsMulti-Field Form with Validation
16/30✨ What it does
v0 builds a validated form for [WHAT IT SUBMITS, e.g. a contact request] using react-hook-form and zod. You add [LIST FIELDS AND TYPES, e.g. name (text), email, company, message (textarea), plan (select)], then point submit at your server action.
<context> Form purpose: [WHAT IT SUBMITS, e.g. a contact request] Fields: [LIST FIELDS AND TYPES, e.g. name (text), email, company, message (textarea), plan (select)] Framework: Next.js with TypeScript Styling: Tailwind CSS, shadcn/ui Validation: react-hook-form + zod </context> <task> Build the form: 1. Render all listed fields with labels, helper text, and accessible error messages below each field. 2. Validate with a zod schema; show inline errors on blur and on submit. 3. Disable the submit button while submitting and show a spinner. 4. On success, show a confirmation message and reset the form. 5. Connect submit to a Next.js server action stub that I can fill in. Make the layout responsive (two columns on desktop where it makes sense) and fully keyboard-accessible. </task>
Pro tip: Specify "react-hook-form + zod" explicitly — v0 will scaffold the schema and resolver instead of writing manual validation you would replace.
Multi-Step Checkout Form
17/30✨ What it does
v0 builds a three-step checkout with Shipping, Payment, and Review, plus masked card fields and an order summary as a working screen you can click in the chat. You validate each step, then connect payment to your processor.
<context> Flow: checkout in 3 steps — Shipping, Payment, Review Framework: Next.js with TypeScript Styling: Tailwind CSS, shadcn/ui </context> <task> Build a multi-step checkout form: 1. Step 1 Shipping: name, address lines, city, postal code, country select — all validated. 2. Step 2 Payment: card number, expiry, CVC with input masking and formatting. 3. Step 3 Review: read-only summary of all entered data plus an order-summary sidebar with line items and total. 4. A step progress bar at the top and Back/Continue navigation with per-step validation. 5. A "Place order" button on the final step that disables and shows a spinner on submit. Keep all data in one typed state object across steps. Fully responsive with the summary collapsing on mobile. </task>
Pro tip: Ask for "input masking on the card and expiry fields" — v0 omits formatting unless prompted, and raw inputs feel unfinished.
Login and Signup Auth Forms
18/30✨ What it does
v0 builds login and signup forms for [APP NAME] with show-or-hide password, social buttons, and a split layout. You hook them to your auth provider, then test the forgot-password link.
<context> App: [APP NAME] Framework: Next.js App Router with TypeScript Styling: Tailwind CSS, shadcn/ui, centered card on a split layout </context> <task> Build auth forms: 1. A login form: email, password (with show/hide toggle), "Remember me" checkbox, and a "Forgot password" link. 2. A signup form: name, email, password with a live strength meter, and a terms-acceptance checkbox. 3. Social-login buttons (Google, GitHub) above a divider. 4. Validation with inline errors and a loading state on submit. 5. A link to toggle between login and signup. Use a split layout with a branded panel on one side and the form card on the other; stack to a single column on mobile. </task>
Pro tip: Ask for "a password strength meter" and "show/hide toggle" by name — these small touches make the forms feel production-ready.
Inline Editable Field
19/30✨ What it does
v0 builds an inline edit field for [WHAT IS BEING EDITED, e.g. a project title or profile field] with save, cancel, and revert on error. You call your update API on save, then leave the old value if it fails.
<context> Use case: [WHAT IS BEING EDITED, e.g. a project title or profile field] Framework: React with TypeScript Styling: Tailwind CSS </context> <task> Build an inline-editable text component: 1. Display mode: shows the value with a subtle hover affordance and an edit (pencil) icon. 2. Clicking the value or icon switches to an input pre-filled with the current value and auto-focused. 3. Save on Enter or blur; cancel on Escape and revert. 4. Show a small saving spinner and an error state if the onSave promise rejects (revert on error). 5. Expose props: value, onSave (async), and placeholder. Keep it fully typed and accessible (aria-label, keyboard support). </task>
Pro tip: State the keyboard rules ("Enter saves, Escape cancels") — v0 implements them precisely when named, vaguely when not.
Filter Sidebar with Faceted Controls
20/30✨ What it does
v0 builds a faceted filter sidebar for [WHAT IS BEING FILTERED, e.g. products] with URL-synced chips and a mobile drawer. You define [LIST, e.g. category (checkboxes), price (range slider), rating (radio), in-stock (toggle)], then read those params on the list page.
<context> List: [WHAT IS BEING FILTERED, e.g. products] Facets: [LIST, e.g. category (checkboxes), price (range slider), rating (radio), in-stock (toggle)] Framework: Next.js with TypeScript Styling: Tailwind CSS, shadcn/ui </context> <task> Build a faceted filter sidebar: 1. Render each facet as a collapsible group with the appropriate control type. 2. Show an active-filters chip row above the results with individual remove buttons and a "Clear all". 3. Sync all filter state to URL searchParams so filters are shareable and survive refresh. 4. Provide a typed onChange that emits the full filter object. 5. On mobile, the sidebar collapses into a "Filters" button that opens a drawer. Use placeholder facet data and keep the control logic typed. </task>
Pro tip: Request "sync filter state to URL searchParams" so your filtered views are bookmarkable and SSR-friendly out of the box.
Design System
5 promptsButton Component with Variants
21/30✨ What it does
v0 builds a Button for [PRODUCT NAME] with primary, secondary, outline, ghost, and destructive variants plus sizes and states. You add it to the design system, then use only these variants on new screens.
<context> Design system: [PRODUCT NAME] Framework: React with TypeScript Styling: Tailwind CSS, class-variance-authority (cva) </context> <task> Build a Button component: 1. Variants: primary, secondary, outline, ghost, destructive. 2. Sizes: sm, md, lg, and icon. 3. States: default, hover, focus-visible ring, active, disabled, and loading (spinner + disabled). 4. Support a leftIcon and rightIcon prop and an asChild pattern for rendering as a link. 5. Define all variants with cva and merge classes with a cn helper. Export the typed component and render a showcase grid of every variant x size combination. </task>
Pro tip: Ask for "a showcase grid of every variant" so you can eyeball all states at once instead of testing them piecemeal.
Color and Typography Token Sheet
22/30✨ What it does
v0 builds a living token page for [BRAND NAME] with color scales from [HEX], plus type, spacing, and radii. You copy the CSS variables into Tailwind, then check contrast on the swatches.
<context> Brand: [BRAND NAME] Primary color: [HEX], accent: [HEX] Framework: Next.js with TypeScript Styling: Tailwind CSS with CSS variables for theming </context> <task> Build a living design-tokens page: 1. Generate a tonal scale (50 to 900) for the primary and accent colors and render swatches with the hex and the Tailwind class name. 2. Show semantic tokens (background, foreground, muted, border, destructive) as labeled swatches. 3. Render the full type scale (display, h1 to h4, body, small, caption) with sample text and the rem/px values. 4. Show spacing and radius scales as visual bars. 5. Define everything as CSS variables in a theme block so light/dark can swap. Lay it out cleanly as a reference page. </task>
Pro tip: Give v0 your two brand hex values — it will generate a coherent tonal scale rather than picking arbitrary defaults.
Card Component Family
23/30✨ What it does
v0 builds a composable Card family with Header, Title, Description, Content, and Footer, plus flat and raised elevation. You assemble the example layouts, then reuse the same pieces on dashboards and lists.
<context> Framework: React with TypeScript Styling: Tailwind CSS, shadcn/ui composition pattern </context> <task> Build a composable Card component family: 1. Export Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter as composable subcomponents. 2. Support elevation variants (flat, raised) and an optional interactive/hoverable state with a subtle lift. 3. Ensure consistent padding and border-radius tokens across subcomponents. 4. Make CardFooter support right-aligned action buttons. Show three example compositions: a stat card, a media card with an image, and a settings card with a footer action. Fully typed. </task>
Pro tip: Request the "compound component pattern (Card, CardHeader, CardContent...)" so it composes cleanly like shadcn/ui instead of one rigid card.
Badge and Status Indicator Set
24/30✨ What it does
v0 builds Badge variants and a StatusDot for online, away, busy, and offline, including an animated online pulse. You map each status to your user model, then drop the dots on avatars.
<context> Framework: React with TypeScript Styling: Tailwind CSS, cva </context> <task> Build a Badge component plus status indicators: 1. Badge variants: default, secondary, success, warning, destructive, and outline. 2. Sizes: sm and md, with optional leading dot or icon. 3. A StatusDot component (online, away, busy, offline) with the right color and an optional pulsing animation for "online". 4. A combined StatusBadge that pairs a dot with a label. Export all as typed components and render a showcase of every variant and status. Keep contrast accessible. </task>
Pro tip: Mention "keep contrast accessible" — v0 will pick text/background pairs that pass legibility instead of low-contrast pastels.
Icon Button and Tooltip Pair
25/30✨ What it does
v0 builds an accessible IconButton that requires a label and shows that label in a tooltip. You use it in toolbars, then tab through to confirm the name is announced.
<context> Framework: React with TypeScript Styling: Tailwind CSS, shadcn/ui Tooltip, lucide-react icons </context> <task> Build an accessible IconButton with a tooltip: 1. IconButton props: icon, label (required for aria-label), variant (ghost, solid, outline), and size. 2. Wrap it so a tooltip showing the label appears on hover and keyboard focus after a short delay. 3. Include a clear focus-visible ring and disabled state. 4. Ensure it is fully keyboard operable and screen-reader friendly (the visible tooltip is decorative; aria-label carries the name). Show a toolbar example with five icon buttons. Fully typed. </task>
Pro tip: Insist on "label required for aria-label" — icon-only buttons are a common accessibility miss that v0 will handle when told.
Go from copy-pasting to actually mastering AI.
AI Academy: hands-on tutorials on ChatGPT, Claude, Midjourney, and many other tools. New tutorials are added regularly.
Refine & Iterate
5 promptsMake It Responsive
26/30✨ What it does
v0 reflows [DESCRIBE WHAT v0 ALREADY GENERATED] so it holds up on [SCREEN SIZE, e.g. mobile under 640px] without changing the copy. You resize the preview, then keep the breakpoints that stop the crush.
<context> Current component: [DESCRIBE WHAT v0 ALREADY GENERATED] Problem: it breaks or looks cramped on [SCREEN SIZE, e.g. mobile under 640px] Framework: keep the existing Next.js + Tailwind setup </context> <task> Refine the current component for responsiveness only — do not change its content or copy: 1. Define behavior at each breakpoint: mobile (single column, stacked), tablet (md:), and desktop (lg:). 2. Convert any fixed widths/heights to fluid or max-width constraints. 3. Make typography scale down sensibly on small screens. 4. Ensure tap targets are at least 44px on mobile and that nothing overflows horizontally. 5. Verify images and grids reflow correctly. Return only the updated component. </task>
Pro tip: Tell v0 "do not change the content, only the layout" so refinement passes do not silently rewrite your copy.
Add Loading, Empty, and Error States
27/30✨ What it does
v0 adds skeleton, empty, and error states to [DESCRIBE, e.g. a list that renders fetched items] that match the real content shape. You toggle each state with your fetch status, then never leave a blank hole.
<context> Current component: [DESCRIBE, e.g. a list that renders fetched items] Framework: keep the existing Next.js + TypeScript setup </context> <task> Add the three missing UI states to the current component: 1. Loading: skeleton placeholders matching the real content shape (not a generic spinner). 2. Empty: a friendly empty state with an icon, message, and a primary action. 3. Error: an error message with a Retry button that re-triggers the fetch. 4. Drive which state shows from a status union type ("loading" | "empty" | "error" | "ready"). Keep the existing success layout intact and only add the new states. </task>
Pro tip: Ask specifically for "skeletons matching the content shape" — generic spinners feel cheaper than skeletons that mirror the final layout.
Match an Uploaded Screenshot
28/30✨ What it does
v0 recreates your uploaded screenshot as a responsive Tailwind component from [DESCRIBE WHAT EXISTS NOW, OR "start fresh"]. You upload the reference, then fix any spacing that still misses the design.
<context> Reference: I am uploading a screenshot of the design I want to match. Current component: [DESCRIBE WHAT EXISTS NOW, OR "start fresh"] Framework: Next.js with TypeScript, Tailwind CSS </context> <task> Recreate the uploaded design as closely as possible: 1. Match the layout, spacing rhythm, and visual hierarchy of the screenshot. 2. Approximate the color palette and typography (state your best-guess hex values and font choices in a comment). 3. Rebuild it with semantic, accessible markup and Tailwind classes. 4. Note any areas where you guessed because the screenshot was ambiguous. 5. Make the result responsive even if the screenshot only shows one viewport. Return the component and the noted assumptions. </task>
Pro tip: v0 reads uploaded images — attach the screenshot in the same message and ask it to "note where it guessed" so you can correct ambiguities fast.
Convert to a Reusable, Typed Component
29/30✨ What it does
v0 refactors [DESCRIBE THE ONE-OFF SECTION v0 GENERATED] into a typed, prop-driven component with mapped lists. You pass data in from the parent, then reuse the same block on other pages.
<context> Current code: [DESCRIBE THE ONE-OFF SECTION v0 GENERATED] Framework: keep Next.js + TypeScript + Tailwind </context> <task> Refactor the current hardcoded UI into a reusable component: 1. Extract all hardcoded text, images, and lists into a typed props interface. 2. Replace inline repeated markup with a mapped render over a data array. 3. Provide sensible default props and document each prop with a short comment. 4. Keep the exact same visual output as before. 5. Show one example usage with realistic placeholder data. Return the refactored component and the usage example. </task>
Pro tip: Pair this with v0 Blocks: once it is prop-driven, you can reuse the component across pages without re-prompting.
Accessibility and Polish Pass
30/30✨ What it does
v0 runs an accessibility and polish pass on [DESCRIBE] without changing the look: headings, focus rings, and reduced-motion. You tab the preview, then keep ARIA only where a control still needs it.
<context> Current component: [DESCRIBE] Framework: keep the existing Next.js + Tailwind setup </context> <task> Do an accessibility and polish pass on the current component without changing its visual design: 1. Add semantic HTML, correct heading order, and ARIA attributes only where needed. 2. Ensure every interactive element is keyboard operable with a visible focus-visible ring. 3. Check color contrast on text and badges; flag and fix any that fail WCAG AA. 4. Add hover, active, and disabled states where missing. 5. Add subtle, tasteful transitions (under 200ms) to interactive elements. List the specific changes you made at the end. </task>
Pro tip: Ask v0 to "list the changes you made" so you can review the a11y edits rather than trusting an opaque rewrite.
Free tool
Prompt Optimizer
Turn a rough idea into a structured, professional AI prompt.
Frequently Asked Questions
Prompts are the starting line. Tutorials are the finish.
A growing library of hands-on tutorials on ChatGPT, Claude, Midjourney, and many other AI tools. New tutorials are added regularly.
7-day free trial. Cancel anytime.
Related guides