v0 Prompts for UI & Components
v0 by Vercel turns a description into React UI: it generates Next.js plus Tailwind components (often with shadcn/ui) that you can paste straight into a project. It's a UI specialist rather than a full-app builder, so it shines when you describe a single component or screen precisely—layout, states, breakpoints, and the data it renders. These prompts show how to get UI that needs no rework.
Last updated · By the Prompt Orange team
Prompt examples you can copy & use
Describe a component precisely
“make a pricing section”
Too vague—AI has to guess what you want
“Build a 3-tier pricing section in React plus Tailwind. Tiers: Free, Pro (£12/mo, highlighted as 'Most popular'), Team (£40/mo). Each card: name, price, 5 feature bullets with checkmarks, and a CTA button. The highlighted card has an orange border and a badge. Responsive: stack vertically below 768px. Use the shadcn Button.”
Specific, clear, ready to use
Specify every state
“make a form”
Too vague—AI has to guess what you want
“Build a newsletter signup form component: email input plus submit button, inline. Include all states—default, focused, loading (spinner in button, input disabled), success ('You're in!' message), and error (red helper text under the input). Tailwind only, accessible labels, works on mobile.”
Specific, clear, ready to use
Match an existing design
“make it look nice”
Too vague—AI has to guess what you want
“Build a dashboard stat card in this style: cream background (#FFFBF5), serif headings, rounded-2xl, a subtle border (#F5E6D3), orange accent (#FF6B4A). The card shows a label, a big number, and a small up/down delta with colour. Then make a row of 4 responsive cards.”
Specific, clear, ready to use
Iterate on the output
“change it”
Too vague—AI has to guess what you want
“Take the pricing section and: make the highlighted card slightly larger, add an annual/monthly toggle that switches the prices (annual is 2 months free), and move the 'Most popular' badge to the top edge. Keep everything else identical.”
Specific, clear, ready to use
Tips for using v0 for ui & components
Describe one component or screen at a time—v0 is a UI specialist, not a full-app builder
Spell out every state (loading, empty, error, success); v0 only builds the states you name
Give exact colours, spacing, and breakpoints so the output drops into your design system
Name shadcn/ui or Tailwind explicitly if your project uses them, so the code matches
Iterate with 'keep everything else identical' to avoid v0 regenerating the whole component