The v0 prompts that get the best results ask for one component or section at a time, give the real content and states, and name the design rules to follow. Below are 14 original prompts for Vercel's v0, grouped into components, pages, design systems and polish.
How to use these prompts
Copy a prompt into a v0 chat and replace the blanks in double braces, or keep the default after the colon: {{framework:Next.js}} means Next.js unless you change it.
v0's text prompting docs sum up the approach in one line: "Start simple. Plan your project. Provide context. Specify and make v0 clarify. Iterate." In practice that means three things.
- One piece at a time. A header, then a hero, then a pricing table. Each prompt is easier to review and fix.
- Real content. Real headings, labels and sample rows give v0 something to lay out. Placeholder text hides problems until later.
- Every state. Ask for loading, empty and error states, and for mobile, in the same prompt.
These v0 features come up in the prompts below:
| Feature | What it does |
|---|---|
| Design mode | Select an element in the preview, tweak styles or type an instruction, then Apply |
| Instructions | Reusable rules saved to your account and applied to chats; built-in presets include Plan Mode |
| Design Systems 2.0 | Teaches v0 your components and tokens, saved as a skill |
| Figma | Paste a Figma file or frame link and v0 builds the screens |
| Attachments | Upload or paste screenshots, mockups and files as context |
New v0 chats start with a Next.js app that uses shadcn/ui and Tailwind CSS, so the prompts refer to shadcn components where it helps.
Components
1. A component with props and states
The basic v0 prompt. Listing the states up front saves three follow-up prompts.
Create a {{component:ProjectCard}} component in {{framework:Next.js}}
with Tailwind and shadcn/ui.
It shows:
{{content:project name, a one-line description, owner avatar and name, last updated time, and a status badge (active, paused, archived)}}.
Props: make every piece of content a typed prop.
States: default, hover, focused (visible keyboard focus), loading
skeleton, and a version with a long name that truncates cleanly.
Show all states on one preview page with realistic sample data.
2. A data table
Tables are where generated UI usually falls short. Name the columns, actions and edge cases.
Build a data table for {{entity:customer orders}} using the shadcn/ui
table.
Columns: {{columns:order number, customer, date, total, status}}.
Features: sort by any column, search by {{search_field:customer name}},
filter by status, pagination with {{page_size:20}} rows per page, and a
row menu with {{row_actions:view, refund, cancel}}.
Include 30 rows of realistic sample data, an empty state with a clear
message, and a loading state. On mobile, collapse to a card list
instead of a table that scrolls sideways.
3. A form with validation
Write the rules for each field, or v0 has to guess them.
Create a {{form:company signup}} form with these fields:
{{fields:company name (required), work email (required, valid email), team size (select: 1 to 10, 11 to 50, 51 to 200, 200+), country (searchable select), agree to terms (required checkbox)}}.
Validate on blur and on submit, with the error message under each field
in plain language. Disable the submit button while sending and show a
success message after. Make the form fully keyboard accessible with
labels on every field.
4. Rebuild a component from a screenshot
Attach the image first. v0's screenshot docs suggest high-resolution images and adding instructions for behavior the image can't show.
Recreate the {{component:pricing table}} in the attached screenshot as
a reusable component.
Match the layout, spacing and visual hierarchy. Use shadcn/ui and
Tailwind instead of custom CSS. Replace any brand logos with neutral
placeholders.
Behavior the screenshot doesn't show:
{{behavior:a monthly/yearly toggle that switches prices, with yearly showing a "2 months free" badge}}.
After building, list anything you weren't sure about.
Pages
5. A landing page, section by section
Use this prompt for the structure, then refine each section with its own follow-up.
Build a landing page for
{{product:a time tracking app for freelance designers}}.
Sections, in order:
1. Hero: headline "{{headline:Know where your hours go}}", one line of
subtext, a primary button "{{cta:Start tracking}}".
2. Three features with an icon, title and two-line description each.
3. A testimonial.
4. Pricing with {{plans:two plans}}.
5. FAQ with four questions.
6. Footer.
Style: {{style:clean, lots of white space, one accent color, large type}}.
Write real copy for every section; no lorem ipsum. Mobile first.
6. A dashboard page
Say what decisions the dashboard supports, not only which charts to draw.
Build a dashboard for {{user:a store owner}} who needs to see
{{goal:how sales are doing this week and what needs attention}}.
Top row: four stat cards, each with the change versus last week:
{{stats:revenue, orders, average order value, refund rate}}.
Middle: a line chart of {{chart:daily revenue for 30 days}}.
Bottom: a table of {{table:orders that need action}}.
Use a sidebar layout with navigation, realistic sample data, and loading
skeletons for each block. Numbers should be formatted (currency, commas,
percentages).
7. A multi-screen flow from Figma
Paste the Figma file link with the prompt. For large files, v0's Figma docs advise naming the page or section so it finds the right frames with fewer reads.
Build the {{flow:onboarding flow}} from this Figma file:
{{figma_link}}
The frames are on the page "{{figma_page:Onboarding v2}}". Build each
screen as a route, connected in order, with working back and next
buttons and form state kept between steps.
Use the file's colors, type and spacing. Use shadcn/ui components where
they match the design. Tell me which frames you used and anything you
couldn't match.
8. Auth screens
UI only, so you can wire up whatever auth provider you choose later.
Create the auth screens for {{app:a project management app}}: sign in,
sign up, forgot password, and check your email.
Sign in: {{methods:email and password, plus a "Continue with Google" button}}.
Each screen: centered card, the app logo at the top, clear errors
(wrong password, email already used), a loading state on submit, and
links between the screens.
This is UI only: put the submit handlers in one file with TODO comments
so I can connect my auth provider later.
Design systems
9. Set up theme tokens
v0 supports Tailwind config and globals.css, including CSS variables. Set the tokens once and every later screen uses them.
Set up the theme for this project in globals.css using CSS variables
for shadcn/ui:
- Brand color: {{brand:#4f46e5}}, used for primary buttons and links only
- Neutrals: {{neutrals:a cool gray scale}}
- Radius: {{radius:8px}}
- Fonts: {{fonts:Inter for body, a tighter display font for headings}}
- Both light and dark mode, with readable contrast in each
Then build a single style guide page that shows buttons, inputs, cards,
badges, alerts and type sizes using only these tokens.
10. Notes for a Design Systems 2.0 import
Design Systems 2.0 has an optional Notes field for things that are hard to infer from code, such as required providers, deprecated components and conventions. Use this prompt in a regular chat with your docs or code attached to draft those notes.
From the attached {{sources:design system README and component docs}},
draft short notes for importing our design system into v0. Cover:
- Required providers, global styles and fonts
- Components to prefer, and deprecated ones to avoid
- Spacing, layout and density rules
- {{extra:Our button variants and when to use each}}
Use short bullet points. Only include rules the sources support, and
mark anything you inferred with "Check:".
11. A reusable Instruction for house rules
Instructions are saved to your account and applied to chats until you uncheck them. Ask v0 to draft one, then save it from the + button in the prompt bar.
Write a v0 Instruction (a title plus a short rule)
that captures how we want UI built:
{{rules:mobile first; use shadcn/ui components before custom ones; no inline styles; every list has an empty state; every async action has loading and error states; accessible labels on all inputs}}.
Write it as direct rules, one per line. Output only the title and the
rule text.
12. Consistency pass across pages
After a few chats, pages drift apart. This pass pulls them back to one system.
Review every page in this project for visual consistency without adding
features.
Check: button styles and sizes, heading sizes, spacing between
sections, card styles, colors that aren't from the theme, and icons
from different sets.
List each inconsistency with the page and component, then fix them so
all pages use the same tokens and shadcn/ui variants. Don't change
copy or layout structure.
Polish and plan
13. Accessibility and responsive pass
Run this before you share a link with anyone.
Do an accessibility and responsive pass on {{scope:every page}}.
Accessibility: semantic headings in order, labels on every input, alt
text on images, visible focus states, keyboard access for menus and
dialogs, and color contrast that meets WCAG AA.
Responsive: check widths of {{widths:375px, 768px and 1280px}}. Nothing
scrolls sideways, tap targets are at least 44px, and tables collapse
on small screens.
List what you changed, grouped by page.
14. Plan a bigger feature before building
For multi-screen features, ask for a plan first. v0's Instructions include a built-in Plan Mode preset that has v0 plan and ask for approval before changing code; this prompt works with or without it.
I want to add
{{feature:team workspaces: users can create a team, invite members by email, and switch between teams}}.
Don't write code yet. Give me:
1. The screens and components needed.
2. The data each screen reads and writes.
3. The order to build them in, with each step small enough to review.
4. Questions you need answered first.
Wait for my go-ahead, then build step 1 only.
What else helps in v0?
Point at things instead of describing them. In Design mode you can select an element and type an instruction, and v0 attaches a screenshot of that element. In the Code tab, you can select lines and add them to your prompt with a comment, which is more precise than describing where the code lives.
Use the queue for multi-step work. v0 lets you queue several prompts while it generates, so you can line up "add the table", "add filters" and "add the empty state" and review each one as it lands. Each time v0 updates code from a message, it creates a new version you can inspect, diff or restore.
For general prompts that work in any agent, see the coding prompts and vibe coding prompts. If you work in an editor or another app builder, the Cursor prompts and Lovable prompts pages follow the same approach. For design guidance an agent can load on its own, see the shadcn skill and the frontend design skill.
Keep your UI prompts in one place
The prompts you tune for your stack are worth keeping. Kipt saves them as Markdown in a private GitHub repo you own, with {{blanks}} for the parts that change, tags, and Cmd+K search, so your table, form and dashboard prompts are a keystroke away on the next project.