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 15 prompts are free instantly — no signup needed. Hand-curated and tested by the AI Academy team.
Landing Pages
5 promptsSaaS Marketing Landing Page
1/30<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>
Generates a complete, responsive SaaS marketing landing page in Next.js with all standard conversion sections.
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<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>
Produces a focused, conversion-oriented waitlist page with a working email form and success state.
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<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>
Creates a reusable alternating-layout feature section driven by a typed props array.
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<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>
Generates a full pricing page with a working billing-period toggle and responsive comparison table.
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<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>
Builds an editorial-style newsletter landing page with subscribe forms and a past-issues grid.
Pro tip: Add "use a serif heading font and generous line-height" — v0 defaults to sans-serif, so name the editorial look you want.
Prompts get you started. Tutorials level you up.
A growing library of 300+ hands-on AI tutorials. New tutorials added every week.
Dashboards
5 promptsAnalytics Dashboard Layout
6/30<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>
Generates a complete analytics dashboard with sidebar, KPI cards, charts, and a data table.
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<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>
Produces a feature-complete data table with search, filtering, sorting, selection, and pagination.
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<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>
Creates a multi-tab settings page including toggles, billing summary, and a destructive confirm dialog.
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<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>
Generates a reusable, collapsible admin layout shell with sidebar, header, and a children slot.
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<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>
Produces a reusable KPI stat-card row with colored trend deltas and inline sparklines.
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<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>
Creates an accessible, animated, reusable modal with focus trapping and scroll lock.
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<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>
Generates a stepper/wizard component with progress UI, per-step validation, and shared state.
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<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>
Produces a complete toast system with a provider, hook, variants, and auto-dismiss animation.
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<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>
Creates a keyboard-driven command palette with grouped, fuzzy-searchable actions.
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<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>
Generates a flexible empty-state component with primary/secondary actions and a compact variant.
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.
Forms
5 promptsMulti-Field Form with Validation
16/30<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>
Produces a validated, accessible form wired to react-hook-form, zod, and a server action stub.
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<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>
Generates a 3-step checkout flow with masked payment inputs, a review step, and an order summary.
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<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>
Creates polished login and signup forms with password tools, social buttons, and a split layout.
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<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>
Produces an inline edit-in-place field with save/cancel, async handling, and error revert.
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<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>
Generates a faceted filter sidebar with URL-synced state, active-filter chips, and a mobile drawer.
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<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>
Creates a fully-variant Button using cva with sizes, states, icons, and a showcase grid.
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<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>
Produces a living token reference page covering color scales, typography, spacing, and radii.
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<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>
Generates a composable card component family with elevation variants and example compositions.
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<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>
Creates a badge and status-indicator set with variants, sizes, and an animated online state.
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<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>
Produces an accessible icon button paired with a tooltip and a toolbar usage example.
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: 300+ hands-on tutorials on ChatGPT, Claude, Midjourney, and 50+ other tools. New tutorials added every week.
Refine & Iterate
5 promptsMake It Responsive
26/30<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>
Refines an existing v0 component for clean responsive behavior across breakpoints without changing content.
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<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>
Adds production-grade loading skeletons, empty, and error states to an existing component.
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<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>
Recreates an uploaded design screenshot as a responsive, accessible Tailwind component.
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<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>
Refactors a hardcoded v0 section into a reusable, prop-driven, typed component.
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<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>
Runs an accessibility and micro-interaction polish pass on an existing component without redesigning it.
Pro tip: Ask v0 to "list the changes you made" so you can review the a11y edits rather than trusting an opaque rewrite.
Frequently Asked Questions
Prompts are the starting line. Tutorials are the finish.
A growing library of 300+ hands-on tutorials on ChatGPT, Claude, Midjourney, and 50+ AI tools. New tutorials added every week.
7-day free trial. Cancel anytime.