Step 1: Define Your Landing Page Structure

Outline the sections your landing page needs. For a SaaS product: Hero section (headline, subtext, CTA button, background visual), Features grid (3-4 key features with icons and descriptions), Pricing section (3 tiers with toggle), Testimonials carousel (3-4 customer quotes), FAQ accordion (6-8 common questions), and Footer (links, logo, copyright). Write a brief description for each section.

Step 2: Generate the Hero Section

In V0, describe your hero: “A SaaS landing page hero section with a bold headline ‘Streamline Your Workflow with AI-Powered Automation’, supporting subtext about saving 10 hours per week, a primary CTA button ‘Start Free Trial’, a secondary link ‘Watch Demo’, and a subtle gradient background transitioning from deep blue to indigo. Include a small product screenshot mockup on the right side.” Review the generated variations, select your preferred one, and refine if needed.

Step 3: Generate the Features Grid

Prompt V0: “A features section with a heading ‘Why Teams Love Our Platform’ and a 2×2 grid of feature cards. Each card has an icon (use Lucide icons), a short feature title, and a 2-line description. Features: Smart Automation (icon: Zap), Real-Time Analytics (icon: BarChart), Team Collaboration (icon: Users), Secure & Compliant (icon: Shield). Use clean card design with subtle borders and hover effects.”

Step 4: Generate Pricing, Testimonials, and FAQ

Continue generating each remaining section with specific prompts. For pricing, reference the earlier tutorial’s prompt structure. For testimonials: “A testimonials section with 3 customer quote cards in a horizontal row, each showing a quote, customer name, role, and company logo placeholder. Use a light background with subtle quote marks icon.” For FAQ: “An accordion FAQ section with 6 expandable questions about pricing, setup, integrations, security, support, and team limits. Use shadcn/ui Accordion component.”

Step 5: Ensure Visual Consistency Across Sections

Review all generated sections side by side. Check for consistent: color palette (all sections should use the same primary/secondary colors), spacing patterns (section padding, card margins, heading sizes), typography hierarchy (consistent heading levels and body text sizes), and border/shadow styles. If any section feels visually inconsistent, refine it: “Adjust this section to use the same blue-to-indigo color palette, 16px card padding, and Inter font family as the other sections.”

Step 6: Assemble Sections in Next.js

Create a new Next.js page file. Import each generated component section. Arrange them in order: Hero → Features → Pricing → Testimonials → FAQ → Footer. Add consistent section spacing between components using Tailwind’s spacing utilities. The page structure becomes: <HeroSection /> <FeaturesSection /> <PricingSection /> <TestimonialsSection /> <FAQSection /> <FooterSection />.

Step 7: Connect Navigation and Final Polish

Add a sticky navigation bar at the top (generate with V0: “A sticky top navigation bar with logo on the left, navigation links to Features, Pricing, FAQ sections, and a ‘Start Free Trial’ button on the right. Use a transparent background that becomes solid on scroll.”). Link nav items to section IDs using anchor scrolling. Test the complete page across mobile, tablet, and desktop breakpoints. Verify all interactive elements work — pricing toggle, FAQ accordion, and CTA buttons. Deploy to Vercel with one click for instant live access.

Step 1: Define Your Component Requirements

Before using V0, clearly define what you need. Consider: the component type (card, form, dashboard, navigation, table), the content it displays, interactive behaviors (toggles, dropdowns, modals), visual styling preferences (colors, spacing, typography), and responsive requirements. Example: “A product comparison table showing 3 software plans with feature rows, checkmarks/crosses for feature availability, a recommended plan badge, and a monthly/yearly pricing toggle that updates prices.”

Step 2: Access V0 and Generate Your Component

Visit v0.dev and type your component description into the prompt field. Be specific about visual details and interactive behaviors. For our example: “Create a pricing comparison component with three plan tiers (Basic $$9/mo, Pro$$29/mo, Enterprise $99/mo). Show feature rows with checkmarks for included features and dashes for excluded ones. Highlight the Pro plan as ‘Recommended’ with a badge. Add a monthly/yearly toggle at the top that switches pricing display. Use a clean, modern design with subtle shadows and rounded cards.”

Step 3: Evaluate Generated Variations

V0 typically generates 2-3 variations of your component. Review each in the live preview panel. Evaluate: visual hierarchy (does the recommended plan stand out?), spacing and proportions, color contrast, responsive behavior (click the mobile/tablet/desktop toggle to check breakpoints), and interactive functionality (test the monthly/yearly toggle). Select the variation closest to your vision as your starting point.

Step 4: Iterate Through Conversational Refinements

Refine your chosen variation through follow-up prompts. Be specific about what to change: “Move the recommended badge to a prominent position on the Pro card and add a subtle gradient background to make it visually distinct from other plans.” “Add tooltips on feature rows that explain each feature when hovered.” “Make the monthly/yearly toggle more prominent with a savings label showing ‘Save 20% on yearly’ when yearly is selected.” Each refinement updates the component code and preview in real-time.

Step 5: Inspect the Generated Code

Click “View Code” to examine the generated React component. You’ll see: proper shadcn/ui imports (Button, Card, Badge components), Tailwind CSS classes for styling, TypeScript type annotations, responsive breakpoint classes, and accessibility attributes (aria-labels, role attributes). The code is clean, modular, and follows shadcn/ui conventions — it’s production-ready, not a rough prototype.

Step 6: Copy into Your Project

Click “Copy Code” to copy the component. In your Next.js or React project, paste the component file. Install any missing shadcn/ui components using the CLI: npx shadcn-ui@latest add button card badge. The generated component uses these primitives, so they must be available in your project. Once dependencies are installed, import the component and use it in your page.

Step 7: Customize and Connect to Data

V0 generates components with static/hardcoded data. Connect to your real data sources by replacing static values with dynamic props. For our pricing component, replace the hardcoded plan data with props: plans={actualPlanData}. Add API calls or database queries to populate real pricing and feature data. The component structure V0 generated remains valid — you’re simply swapping static content for dynamic data bindings.