v0 by Vercel generates production-ready React components from text descriptions. Describe a UI, get multiple design variants in seconds, and export clean code using Tailwind CSS and shadcn/ui. These prompts are optimized for the best v0 results.
v0 generates UI components, not full applications. The more precise your visual and behavioral description, the closer the output matches your vision.
Colors, spacing, typography, shadows, and border radius. Reference designs you like: 'Stripe-style pricing cards' or 'minimal like Linear.'
Hover states, click interactions, animations, and responsive breakpoints. 'Cards scale up on hover with a shadow transition.'
What content does this component display? List the fields: 'Each card shows title, description, price, image, and a CTA button.'
Specify mobile, tablet, and desktop layouts. 'Single column on mobile, 2 columns on tablet, 3 columns with sidebar on desktop.'
Mention shadcn/ui components by name: 'Use shadcn Dialog for the modal, Command for search, and DataTable for the list.'
Generate individual dashboard elements that you can compose into complete admin interfaces.
Create a row of 4 KPI metric cards for a SaaS analytics dashboard. Each card displays: - Metric label (e.g., "Monthly Revenue", "Active Users", "Churn Rate", "NPS Score") - Large metric value with appropriate formatting (currency, number, percentage) - Trend indicator: green up arrow or red down arrow with percentage change - Sparkline chart showing the last 7 data points Design: White cards with subtle border and shadow-sm. Rounded-xl. Metric value in 2xl bold. Trend text in xs with green-600 or red-600 coloring. Sparkline as a tiny SVG line chart in the bottom right corner. Layout: 4 columns on desktop, 2 on tablet, 1 on mobile. Gap-4 between cards.
Build a data table component for displaying customer records. Features: - Columns: Name (with avatar), Email, Plan (badge: Free/Pro/Enterprise), MRR (currency), Status (Active/Churned dot indicator), Last Active (relative time) - Sortable columns with ascending/descending indicators - Search input that filters across all text columns - Pagination with page size selector (10, 25, 50) - Row checkbox selection with bulk action dropdown (Export, Delete, Change Plan) - Row click navigates to detail (render as a hover highlight) Design: Clean minimal table. Header row with gray-50 background and uppercase xs text. Alternating row colors on hover. Compact row height for data density. Use shadcn/ui Table, Input, Select, DropdownMenu components.
Create a collapsible sidebar navigation component. Expanded state: - Logo area at the top (company name + icon) - Navigation sections with labels: "Main" (Dashboard, Analytics, Reports), "Manage" (Users, Teams, Settings), "Support" (Help Center, Changelog) - Each nav item has a Lucide icon, label text, and optional notification badge - Active item has a subtle background highlight and left border accent - User profile section at bottom with avatar, name, role, and dropdown menu Collapsed state: - Shows only icons (tooltips on hover showing the label) - Logo collapses to just the icon - Toggle button at the bottom to expand/collapse Design: Slate-900 background sidebar on dark, white background on light. Smooth 200ms transition between expanded and collapsed states. Width: 260px expanded, 68px collapsed. Sticky, full viewport height.
Generate conversion-optimized sections for landing pages and marketing sites.
Create a 3-tier pricing section for a SaaS product. Tiers: Starter ($9/mo), Professional ($29/mo, most popular), Enterprise (Custom pricing). Each tier card shows: - Tier name and price (monthly/annual toggle at the top) - Short description of who the tier is for - Feature list with checkmarks (8-12 features per tier) - Features not included shown with gray text and x icon - CTA button: "Get Started" for Starter/Pro, "Contact Sales" for Enterprise - Most popular tier highlighted with a colored border and "Most Popular" badge Design: Clean white cards on gray-50 background. Middle card slightly elevated with shadow-lg and a blue (#2563EB) border. CTA buttons: outlined for Starter, solid blue for Professional, solid black for Enterprise. Annual pricing shows crossed-out monthly price with "Save 20%" badge.
Build a hero section for a developer tool landing page. Content: - Eyebrow text: "Now in public beta" with a sparkle icon - Headline: large, bold, 2 lines maximum. Example: "Ship faster with AI-powered code review" - Subheadline: 1-2 sentences explaining the value proposition - Two CTA buttons: "Start Free" (solid black) and "Watch Demo" (outlined with play icon) - Trust badges below CTAs: "No credit card required" and "14-day free trial" - Below the fold: a browser mockup frame containing a screenshot placeholder (gray gradient with subtle UI wireframe shapes) Design: Generous vertical padding (py-24). Centered text alignment. Headline in 5xl/6xl tracking-tight. Subheadline in xl text-gray-500. Background: subtle dot grid pattern at 10% opacity. Smooth fade-in animation for the browser mockup.
Create a testimonial section with company logos and quotes. Layout: 3 testimonial cards in a masonry-style grid (varying heights based on quote length). Each card contains: - Company logo (grayscale placeholder, 120x40px) - Quote text in serif/italic styling (2-4 sentences) - Author photo (circular, 48px), name in bold, role + company in gray text - Star rating (5 stars, filled in amber-400) Above the grid: section heading "Trusted by teams at" with a row of 6 grayscale company logo placeholders. Design: White cards with gray-100 border and rounded-2xl. Quote marks as a large decorative element in the top-left of each card (text-gray-200, text-6xl). Cards have different heights for visual interest. Responsive: single column on mobile, masonry on desktop.
Complex form patterns and interactive elements that go beyond basic inputs.
Create a multi-step onboarding form with 4 steps. Step 1 - Account: Name, email, password fields with validation Step 2 - Profile: Company name, role dropdown, team size radio buttons (1-5, 6-20, 21-100, 100+) Step 3 - Preferences: Toggle switches for email notifications, usage analytics, and weekly digest. Timezone selector dropdown. Step 4 - Confirmation: Summary of all entered data with an edit button for each section Navigation: Step indicator at the top showing progress (numbered circles with connecting lines). "Back" and "Continue" buttons at the bottom. "Skip" option on steps 2 and 3. Design: Centered card layout (max-w-lg). Step indicator uses blue for completed steps, black for current, gray for upcoming. Smooth slide transition between steps. Form fields use shadcn/ui Input, Select, RadioGroup, Switch components.
Build a command palette component (like Cmd+K in VS Code or Linear). Trigger: Keyboard shortcut Cmd+K (show as a floating modal with backdrop blur). Features: - Search input with magnifying glass icon and keyboard shortcut hint - Recent searches section (3-5 items with clock icon) - Results grouped by category: "Pages" (Dashboard, Settings, Billing), "Actions" (Create Project, Invite Member, Export Data), "Help" (Documentation, Changelog, Support) - Each result shows icon, label, and optional keyboard shortcut on the right - Arrow key navigation with highlighted active item - Escape to close, Enter to select Design: Centered modal, max-w-xl, rounded-2xl with shadow-2xl. Backdrop blur-sm with black/50 overlay. Search input with no border, large text. Category headers in uppercase xs gray-400. Results have py-2 px-3 with rounded-lg hover background.