40 Best v0 by Vercel Prompts (2026)

Build a landing-page hero for [product name], a [one-line description]. Product surface: an eyebrow tag, an H1 headline, a one-sentence subhead, a primary CTA ([Start free]) and a secondary ghost CTA ([Book a demo]), a trust line of 5 customer logos, and a framed product screenshot on the right. Used by [first-time visitors from a paid ad] to decide whether to sign up in under 10 seconds. Constraints: Next.js App Router, Tailwind, shadcn/ui Button. Desktop-first, responsive down to 360px. Design tokens: primary #4F46E5, background #FFFFFF, text #0F172A, radius 12px, font Inter, generous spacing. Do not add a nav bar or footer yet.

Build a pricing section with three plans: [Starter $0], [Pro $20/mo], [Team $60/mo]. Product surface: three shadcn/ui Card columns, a feature list with checkmarks per plan, a "Most popular" badge on Pro, a monthly/annual toggle that updates prices, and a CTA button per card. Used by [an evaluator comparing plans] to pick the right tier. Constraints: Next.js, Tailwind, shadcn/ui Card, Badge, Switch. Highlight Pro with the primary color border. Design tokens: primary #4F46E5, muted #64748B, radius 12px. Responsive: stack to one column under 768px.

Build a feature section: a centered heading, a subhead, and a responsive grid of 6 features. Each feature: a lucide icon in a tinted rounded square, a short title, and two lines of copy. Features: [list your 6 features and one-line benefits]. Used by [a visitor skimming for the one feature they need]. Constraints: Next.js, Tailwind, lucide-react icons, shadcn/ui styling. Grid is 3 columns on desktop, 2 on tablet, 1 on mobile. Design tokens: icon tint from primary #4F46E5 at 10% opacity, radius 10px, text #0F172A. Keep copy tight, no lorem ipsum.

Build a social-proof section: a grayscale row of 6 customer logos, then a 3-column grid of testimonial cards. Each card: a quote, an avatar, a name, and a role/company. Use [these 3 quotes or generate realistic placeholders]. Used by [a skeptical buyer looking for proof it works]. Constraints: Next.js, Tailwind, shadcn/ui Card and Avatar. Design tokens: card background #F8FAFC, radius 12px, subtle 1px border #E2E8F0. Logos are monochrome and pop to color on hover. Responsive: 1 column of testimonials on mobile.

Build a single-screen waitlist landing page for [product]. Product surface: centered logo, an H1, a one-line value prop, an email capture (input + "Join the waitlist" button) with inline validation and a success state, and a small "No spam" reassurance line. Used by [early adopters from a launch tweet] to reserve access in one action. Constraints: Next.js App Router, Tailwind, shadcn/ui Input and Button. Wire the submit to a server action that logs the email for now (I will connect a database later). Design tokens: dark theme, background #0B0F1A, primary #22D3EE, radius 10px. Fully responsive and keyboard-accessible.

Before building, write a short PRD for a marketing site for [product]: the pages ([Home, Features, Pricing, About, Contact]), the sections on each, the shared nav and footer, the primary conversion goal, and the design-token set (colors, radius, font, spacing scale). List the components you will reuse across pages. Do not generate code yet. When I approve the PRD, build the Home page first using Next.js App Router, Tailwind, and shadcn/ui, and reuse the shared nav and footer.

Build an analytics dashboard overview page. Product surface: a top row of 4 KPI cards ([MRR, Active users, Churn %, Trial conversions]) each with a value, a delta vs last period, and a sparkline; a large line chart of [signups over 30 days] with a range selector; a bar chart of [revenue by plan]; and a table of the [10 most recent signups]. Used by [a founder checking growth each morning] to spot what changed overnight. Constraints: Next.js App Router, Tailwind, shadcn/ui Card and Table, recharts for charts. Design tokens: primary #4F46E5, positive #16A34A, negative #DC2626, radius 12px. Responsive: KPI cards wrap to 2x2 on tablet. Use realistic sample data.

Build an admin users table. Product surface: a shadcn/ui Table of users ([avatar, name, email, role, status, last active]), a search input, filter dropdowns for [role] and [status], column sorting, row checkboxes with a bulk-actions bar ([Suspend, Delete, Export]), pagination, and a right-side drawer that opens on row click to show user detail. Used by [a support admin managing accounts] to find and act on users fast. Constraints: Next.js, Tailwind, shadcn/ui Table, Input, Select, Checkbox, Sheet. Design tokens: radius 10px, muted #64748B. Responsive: collapse less-critical columns under 900px. Use sample data.

Build a support dashboard. Product surface: KPI cards for [open tickets, avg first response time, tickets solved today, SLA breaches]; a "tickets by priority" donut ([urgent, high, normal, low]); an agent list showing each agent's name, avatar, and current workload; and a table of open tickets ([subject, requester, priority, age, assignee]). Used by [a support lead deciding how to route work right now]. Constraints: Next.js, Tailwind, shadcn/ui Card, Table, Badge, recharts. Design tokens: urgent #DC2626, high #F97316, normal #4F46E5, radius 12px. Responsive down to tablet. Sample data.

Build a reusable dashboard app shell. Product surface: a collapsible left sidebar with a logo, primary nav items ([Overview, Customers, Orders, Reports, Settings]) with lucide icons and an active state, a secondary section ([Help, Log out]) pinned to the bottom, a top bar with a search input, a notifications bell, and a user avatar menu, and a main content slot for the page. Used across every authenticated page. Constraints: Next.js App Router with a layout, Tailwind, shadcn/ui Sidebar and DropdownMenu. Design tokens: sidebar background #0F172A, active item primary #4F46E5, radius 10px. Sidebar collapses to icons under 1024px and to a drawer on mobile.

Build a settings page with left-rail tabs: [Profile, Account, Notifications, Billing, Team]. Product surface: Profile has name, email, avatar upload, and a bio textarea; Notifications has grouped toggle rows; Billing shows the current plan, a usage meter, and a payment-method card. Each tab has a sticky "Save changes" bar that enables only when a field is dirty. Used by [an account owner adjusting their workspace]. Constraints: Next.js, Tailwind, shadcn/ui Tabs, Input, Switch, Card. Design tokens: radius 10px, primary #4F46E5. Responsive: tabs move to a top scroll strip on mobile.

Build a reusable KPI cards row as one component that takes an array of metrics. Each card: a label, a big value, a delta pill (green up / red down) with a percentage, a caption ([vs last 30 days]), and a small sparkline. Render [4] sample cards ([Revenue, New users, Conversion, Refunds]). Constraints: Next.js, Tailwind, shadcn/ui Card, recharts sparkline. Props-driven so I can pass real data. Design tokens: positive #16A34A, negative #DC2626, radius 12px, subtle border #E2E8F0. Responsive: wrap to 2 per row on tablet, 1 on mobile.

I want to build [app: e.g. a team task tracker]. First write a short PRD: the core user stories, the data model (entities and fields), the pages and routes, the server actions/API routes needed, and where a database and auth are required. Propose the shadcn/ui components and the design-token set. Do not write code yet. After I approve, build it in this order: (1) the data model and Supabase tables, (2) the app shell and auth, (3) the main list page, (4) create/edit, (5) polish. Stack: Next.js App Router, Tailwind, shadcn/ui, server actions.

Build a [projects] CRUD feature backed by Supabase. Product surface: a list page with a table of [projects] ([name, status, owner, updated]), a "New project" button opening a dialog form, inline edit, and delete with a confirm. Wire it to a Supabase table [projects] with the matching columns and RLS off for now. Use server actions for create, update, and delete, and revalidate the list after each. Constraints: Next.js App Router, Tailwind, shadcn/ui Table, Dialog, Form. Design tokens: radius 10px, primary #4F46E5. Add optimistic UI on delete. Connect the Supabase integration and set the env vars.

Add authentication to this app using [Supabase Auth]. Product surface: a sign-in and sign-up page (email + password, with an OAuth [Google] button), a sign-out action in the user menu, and route protection so [/dashboard/*] redirects unauthenticated users to /login. Show the signed-in user's name and avatar in the top bar. Constraints: Next.js App Router, server actions, middleware for route protection, Tailwind, shadcn/ui. Design tokens: match the existing theme. Handle and display auth errors inline. Do not build a password-reset flow yet.

Build a [contact] form that submits via a Next.js server action. Product surface: fields [name, email, message], a shadcn/ui Form with client and server validation using Zod, a pending state on the button, inline field errors, and a success toast. On submit, the server action validates, then [inserts into a Supabase table `messages` / sends via the [Resend] integration]. Return a typed result and show errors from the server. Constraints: Next.js App Router, Tailwind, shadcn/ui Form, Input, Textarea, Button, Toast. Design tokens: radius 10px. Keep it accessible and responsive.

Add a route handler at [app/api/webhooks/route.ts] that accepts a [POST] with JSON body [{ event, data }]. Validate the body with Zod, verify a [signature header] against an env secret, handle the [order.created] event by inserting a row into Supabase, and return 200 with a JSON ack or 400/401 on failure. Log failures. Constraints: Next.js App Router route handler, TypeScript, typed responses. Add a short comment block documenting the expected payload. Set the env var placeholders and tell me which ones to fill in Vercel.

Add realtime notifications. Product surface: a bell in the top bar with an unread count badge, a dropdown list of the latest [10] notifications ([icon, message, timestamp, read state]), a "Mark all read" action, and toast pop-ins for new events. Back it with a Supabase table [notifications] and subscribe to realtime inserts so new rows appear without refresh. Used by [a user who needs to see activity as it happens]. Constraints: Next.js App Router, Tailwind, shadcn/ui DropdownMenu, Badge, Toast, Supabase realtime. Design tokens: unread dot primary #4F46E5, radius 10px. Handle the empty state.

Prepare this app for deployment to Vercel. List every environment variable it needs ([SUPABASE_URL], [SUPABASE_ANON_KEY], [SUPABASE_SERVICE_ROLE], any API keys), what each is for, and which must stay server-only. Add a short README section on setup, confirm the build passes, and flag anything that will break in production (missing env vars, client-side use of secrets). Then walk me through deploying to Vercel and connecting the GitHub repo so future changes ship on push.

Build a command palette component. Product surface: opens on [Cmd/Ctrl+K], a search input, grouped results ([Pages, Actions, Recent]), keyboard navigation with arrow keys and Enter, a highlighted match, and an empty state. Actions are passed in as props. Constraints: Next.js, Tailwind, shadcn/ui Command and Dialog. Fully keyboard-accessible with proper focus trap and aria roles. Design tokens: radius 12px, muted #64748B, subtle border #E2E8F0. Closes on Escape and on selection.

Build a reusable data table component that takes columns and rows as props. Features: column sorting, a global search, per-page pagination, sticky header, row selection, and a slot for a per-row actions menu. Include loading skeleton rows and an empty state. Render a sample of [8] rows of [orders]. Constraints: Next.js, Tailwind, shadcn/ui Table, Input, Checkbox, DropdownMenu. Design tokens: radius 10px, header background #F8FAFC, border #E2E8F0. Make it generic with TypeScript generics so any row shape works.

Build a flexible Card component with variants: [default], [elevated], [outline], and [interactive] (hover lift + focus ring). It accepts a header slot, a body slot, and an optional footer with actions. Show one example of each variant in a demo grid. Constraints: Next.js, Tailwind, built on the shadcn/ui Card, variants via class-variance-authority. Design tokens: radius 12px, shadow soft, border #E2E8F0, primary #4F46E5 for the focus ring. Keep it accessible: interactive cards are focusable and keyboard-activatable.

Build a toast system with a provider and a useToast hook. Types: [success, error, warning, info], each with an icon and color, an optional action button, auto-dismiss with a progress bar, and stacking in the bottom-right. Include a demo panel with buttons to fire each type. Constraints: Next.js App Router, Tailwind, shadcn/ui Toast primitives. Design tokens: success #16A34A, error #DC2626, warning #F97316, info #4F46E5, radius 10px. Respect prefers-reduced-motion and make toasts screen-reader announced.

For @file:[the list/table on the current page], add proper empty, loading, and error states. Empty: a centered icon, a short headline, one line of guidance, and a primary CTA ([Create your first item]). Loading: shimmer skeletons matching the real layout. Error: a friendly message with a Retry button. Constraints: Next.js, Tailwind, shadcn/ui. Design tokens: muted #64748B, radius 10px. Keep each state as its own component so I can reuse them. Do not change the happy-path layout.

Build an accessible confirmation dialog component. Product surface: a title, a description, a destructive primary action ([Delete]) and a cancel action, with the confirm button showing a pending spinner while an async action runs. Constraints: Next.js, Tailwind, shadcn/ui AlertDialog. Must trap focus, close on Escape, restore focus to the trigger on close, and have aria-labelledby/aria-describedby wired correctly. Design tokens: destructive #DC2626, radius 12px. Provide a small usage example.

Build a 3-step onboarding wizard. Steps: (1) [workspace name + logo], (2) [invite teammates by email, add rows], (3) [pick a starting template]. Product surface: a progress indicator, Back/Next buttons, per-step Zod validation that blocks Next until valid, state preserved across steps, and a final "Finish" that shows a success screen. Used by [a new user setting up their account]. Constraints: Next.js App Router, Tailwind, shadcn/ui Form, Input, Button, Progress. Design tokens: primary #4F46E5, radius 10px. Responsive and keyboard-navigable. Submit the final payload via a server action.

Build a checkout form. Product surface: contact ([email]), shipping address fields, a payment section (card number, expiry, CVC with formatting/masking), an order summary card with line items and a total, and a "Pay [$amount]" button with a pending state. Client and server validation with Zod, inline errors, and a disabled submit until valid. Used by [a buyer completing a purchase] and it must feel trustworthy. Constraints: Next.js App Router, Tailwind, shadcn/ui Form, Input, Card. Design tokens: primary #4F46E5, error #DC2626, radius 10px. Do not integrate a real payment provider yet; stub the submit as a server action.

Build a searchable, filterable [product catalog] page. Product surface: a search input with debounce, a left filter rail ([category checkboxes, price range slider, in-stock toggle]), a sort dropdown, a responsive results grid of product cards, active-filter chips with clear buttons, and a "no results" state. Reflect filters in the URL query so state is shareable. Used by [a shopper narrowing down options]. Constraints: Next.js App Router with searchParams, Tailwind, shadcn/ui Input, Checkbox, Slider, Select. Design tokens: primary #4F46E5, radius 10px. Sample product data.

Build a file upload component. Product surface: a drag-and-drop zone plus a browse button, accepted types [images and PDFs] with a size limit, a list of queued files each with a thumbnail/icon, name, size, a progress bar, and a remove button, plus overall progress and a done state. Validate type and size before upload and show clear errors. Constraints: Next.js App Router, Tailwind, shadcn/ui, upload to [Supabase Storage / a stubbed server action] with a signed flow. Design tokens: primary #4F46E5, error #DC2626, radius 12px. Keyboard-accessible and screen-reader friendly.

Build a booking flow for [a 30-minute call]. Product surface: a month calendar with available days highlighted, a time-slot list for the selected day (in the user's timezone), a details step ([name, email, notes]), and a confirmation screen with an add-to-calendar link. Disable past and unavailable slots. Used by [someone scheduling a meeting] to book in under a minute. Constraints: Next.js App Router, Tailwind, shadcn/ui Calendar, Button, Form. Design tokens: primary #4F46E5, radius 10px. Responsive: calendar and slots stack on mobile. Persist the booking via a server action.

[Attach a screenshot.] Rebuild this screen as production code. Match the layout, spacing, and component hierarchy, but rebuild it with our stack, not raw HTML: Next.js App Router, Tailwind, and shadcn/ui components. Replace any brand colors with our design tokens: primary #4F46E5, background #FFFFFF, text #0F172A, radius 10px, font Inter. Make it responsive down to 360px and keyboard-accessible. Use realistic placeholder content, not lorem ipsum. Tell me anything in the screenshot you had to guess.

[Attach a screenshot of the current page, or paste its code.] Keep the same content and information hierarchy, but redesign the visuals to feel [modern, calm, and premium]. Improve spacing rhythm, typographic scale, and contrast; simplify the color palette to primary #4F46E5 on a neutral base; and add subtle depth with soft shadows and 12px radii. Keep it Next.js, Tailwind, and shadcn/ui. Do not remove any functionality or fields. Show a before/after summary of what you changed and why.

[Import from Figma / attach the exported frame.] Turn this design into a responsive Next.js page. Map the Figma text and spacing styles to Tailwind tokens, use shadcn/ui components where they fit (buttons, inputs, cards), and extract repeated blocks into reusable components. Keep it pixel-close on desktop and gracefully responsive on mobile. Design tokens: read colors and radii from the frame, font Inter. Flag any Figma layer that does not map cleanly to a component so I can decide.

Restyle this app to a new brand without changing structure or copy. New design tokens: primary [#0EA5E9], secondary [#F59E0B], background [#0B1120] (dark), text [#E2E8F0], radius [14px], font [Geist]. Apply them through the Tailwind theme and shadcn/ui CSS variables so the change is centralized, not hard-coded per component. Update focus rings, hover states, and charts to match. Keep contrast accessible (WCAG AA). Show me the tokens you set so I can reuse them.

[Import my GitHub repo.] Study the existing structure, Tailwind config, and shadcn/ui setup, then add a new [reports] page that matches the conventions already in the codebase (routing, component patterns, naming, and design tokens). Reuse existing components rather than creating new ones where possible. Product surface: [describe the page]. When done, open a pull request with a clear description of what you added. Do not change unrelated files or reformat code you did not touch.

Set up a centralized theme before we build more. Define these design tokens as Tailwind theme values and shadcn/ui CSS variables: colors (primary #4F46E5, secondary #22D3EE, success #16A34A, danger #DC2626, neutral scale), radius 10px, font Inter, a spacing scale (4/8/12/16/24/32), and shadow presets (sm, md, lg). Apply them app-wide so every component reads from the tokens, not hard-coded values. Add a light and dark variant. Show me the token file so I can tweak it.

The layout is right; now polish the visuals. Tighten vertical rhythm so section spacing is consistent, increase the heading-to-body size contrast, soften the card shadows, align the icon sizes, and make the primary buttons the clear focal point on each screen. Keep everything on the existing design tokens. Small visual tweaks only, no structural or functional changes. [Then use Design Mode to nudge specific colors and spacing without spending generations.]

Make this page fully responsive and accessible without changing its content. Responsive: verify layouts at 360px, 768px, and 1280px; stack multi-column sections on mobile; make tables scroll or collapse; ensure tap targets are at least 44px. Accessible: proper heading order, labels tied to inputs, visible focus rings, AA color contrast, and aria attributes on interactive components. Keep Next.js, Tailwind, and shadcn/ui. List the specific issues you found and fixed.

[Queue these prompts in order.] 1) Build the [dashboard overview] layout with the KPI row, main chart, and recent-activity table using sample data. 2) Wire the data to a Supabase table [metrics] via a server action and revalidate. 3) Add empty, loading, and error states to every widget. 4) Make it responsive down to 360px and keyboard-accessible. 5) Do a visual polish pass on spacing, shadows, and the primary color. Stack: Next.js App Router, Tailwind, shadcn/ui. Report after each step.

[Fork this generation.] From the current version, produce an alternative design direction: same content and features, but a [bolder, editorial] look with a larger type scale, a warmer palette (primary [#EA580C]), more whitespace, and full-bleed section imagery. Keep it Next.js, Tailwind, and shadcn/ui. I want to compare this branch side by side with the original, so do not overwrite the current version. Summarize the key differences in direction.