Best for
Founders who want a polished SaaS landing shell with opinionated layout and motion — without building from scratch
Stack
A ready-made 237 UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the 237template does, how it's wired, and where it's opinionated.
The 237 template gives you a complete, section-driven SaaS landing page: HeroBlock at the top with a headline, subheadline, and primary + secondary CTA buttons, a FeatureGrid below in a 3-column card layout with icon + title + description per feature, a SocialProof row showing logos or testimonials, a PricingSection with 2-3 tiers (one visually highlighted as recommended), and a FooterBlock with nav links, social icons, and legal text. The NavBar is sticky and includes a CTA button that persists as users scroll.
Framer Motion powers the entrance animations: HeroBlock and FeatureGrid cards animate in on scroll using useInView — a satisfying premium feel without custom CSS. The shadcn/ui Card component underpins both the FeatureGrid and PricingSection, keeping the design system consistent.
The honest caveat: this template is opinionated. The section order is fixed (Hero → Features → Social Proof → Pricing → Footer), the FeatureGrid is 3 columns, and the PricingSection supports 2-3 tiers only. If you need 15 features in a tabbed layout or a mega-footer with multiple columns of links, you'll be fighting the template rather than building with it. Also: Framer Motion scroll animations fire in Client Components only — the animated sections must be marked 'use client', which means they can't be Server Components even if you add data fetching.
Key UI components
HeroBlockLarge headline, subheadline, and primary + secondary CTA buttons with motion entrance
FeatureGrid3-column grid of feature cards (icon + title + description), animated on scroll
SocialProofLogo strip or testimonial row showing brand credibility signals
PricingSection2-3 tier pricing cards with shadcn/ui Card and highlighted recommended tier
FooterBlockNav links, social icons, and legal text
NavBarSticky top nav with logo, section links, and CTA button
Libraries it leans on
framer-motionScroll-triggered entrance animations on FeatureGrid and HeroBlock via useInView
shadcn/ui CardPowers FeatureGrid feature cards and PricingSection tier cards
Tailwind CSSLayout, spacing, and color utilities across all sections
Fork it and get it running
Forking the 237 template takes about 5 minutes. Because the template is a single-page layout, you'll spend most of your time swapping copy and colors — no routing or data setup required to go live.
Fork the template from V0 community
Open https://v0.dev/chat/community/HJBw6m48HwV and click 'Fork' to copy the template into your V0 workspace. You'll land in the V0 editor with the landing page loaded. No account configuration or env vars are required for the template to render.
Tip: Sign in to V0 before clicking Fork — the button redirects to login if you're not authenticated.
You should see: You land in the V0 editor with a Preview tab showing the full landing page: HeroBlock, FeatureGrid, SocialProof, PricingSection, and FooterBlock all visible on scroll.
Scroll through all sections and verify animations
In the V0 Preview tab, scroll from top to bottom through all sections — HeroBlock, FeatureGrid, SocialProof, PricingSection, FooterBlock — to confirm the Framer Motion entrance animations fire correctly and the PricingSection highlighted tier is visually distinct.
You should see: All sections render. FeatureGrid cards animate in on scroll. PricingSection shows one highlighted tier with a visual border or background difference.
Edit headline copy in Design Mode
Switch to Design Mode by pressing Option+D (Mac) or clicking the Design icon in the V0 toolbar. Click directly on the HeroBlock headline text to edit it without consuming credits. Swap the placeholder headline, subheadline, and CTA button labels for your actual product copy.
Tip: Design Mode adjustments to static text are free — they don't use V0 credits.
You should see: HeroBlock shows your product's headline and CTA text. The preview updates immediately.
Publish to production
Click Share → Publish tab → 'Publish to Production' in the V0 editor. Vercel builds and deploys your landing page in under 60 seconds. You'll receive a .vercel.app URL ready to share.
You should see: A live Vercel URL is shown. All animations and sections render correctly on the public URL.
Set a custom domain
Open the Vercel Dashboard, navigate to your project, click Settings → Domains, and add your custom domain. Follow Vercel's DNS instructions to point your domain's CNAME or A record. SSL is provisioned automatically.
You should see: Your custom domain serves the landing page with HTTPS.
Connect GitHub for ongoing edits
Click the Git panel in the V0 editor and connect your GitHub account. V0 creates a branch (v0/main-{hash}) that tracks your edits. Pull the code locally via Cursor or VS Code for deeper customization of the PricingSection tier structure or FeatureGrid card count.
You should see: The Git panel shows a connected repo. You can now clone the project and edit locally.
The prompt pack
Copy-paste these straight into v0's chat to customize the 237template. Each one names this template's own components — no generic filler.
Replace all placeholder copy for your product
Replaces all placeholder copy across every section while preserving the animation and layout structure.
Replace all placeholder text in HeroBlock, FeatureGrid, SocialProof, and FooterBlock with copy for a SaaS tool that helps freelancers track client projects. Use these headlines — Hero: 'Never lose track of a client project again' / FeatureGrid features: 'Smart Deadlines', 'Invoice Tracking', 'Client Portal' (with one-line descriptions for each) / PricingSection: Free $0, Pro $29/mo, Team $99/mo. Keep all existing Framer Motion animations and section order.
Update brand colors across the entire template
Applies a consistent brand color to all interactive elements by updating the single CSS variable source of truth.
Change the primary brand color across the entire 237 template to #1A56DB (blue). Update the Tailwind CSS variable --primary in globals.css under both :root and .dark. Make sure the NavBar CTA button, HeroBlock primary button, and PricingSection highlighted tier ring/border all use this color. If any hardcoded hex values exist in NavBar or HeroBlock, replace them with the Tailwind primary class.
Add email waitlist signup to HeroBlock
Converts the secondary CTA into a working email capture form backed by a Supabase table with proper RLS.
Replace the HeroBlock secondary CTA button with an email input + Submit button inline. On submit, call a Server Action that inserts the email into a Supabase table: waitlist (id uuid, email TEXT UNIQUE, created_at TIMESTAMPTZ). Show a success message in HeroBlock after submission. Add RLS policy: anon users can insert but not select. Use NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY from the Vars panel.
Wire PricingSection to Stripe Checkout
Adds Stripe Checkout to each paid PricingSection tier via a Server Action, keeping the secret key off the client.
Wire the PricingSection CTA buttons to Stripe Checkout. For each paid tier, add an onClick that calls a Server Action creating a Stripe Checkout session using STRIPE_SECRET_KEY (server-only, set in V0 Vars panel). Redirect the user to the returned Checkout URL. The Free tier button links to /signup instead. Use NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY for the client-side Stripe import. Verify STRIPE_SECRET_KEY starts with sk_test_ in development.
Add Supabase auth with gated dashboard
Adds a complete Supabase auth flow — signup, login, protected dashboard, and middleware — to the landing page starter.
Add authentication to the 237 template using Supabase Auth (email+password). Add /signup and /login pages using shadcn/ui Card, Input, and Button. Add middleware.ts that redirects unauthenticated requests from /dashboard to /login. Create a /dashboard page as a Server Component that shows 'Welcome, {user.email}' after login. Wire the NavBar CTA button to /signup. Use NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY; use the SUPABASE_SERVICE_ROLE_KEY only in the middleware for session validation.Gotchas when you extend it
The failures people actually hit when they push this template past its defaults — and the exact fix for each.
FeatureGrid animations fire immediately on page load instead of on scrollWhy: The initial animation state fires before useInView detects scroll visibility. This usually means the component is missing once: true in useInView options, or the amount threshold is set to 0, which counts as immediately visible.
Fix: In the animated FeatureGrid component, update useInView to use { once: true, amount: 0.1 } — this waits until 10% of the element is visible before triggering the animation.
FeatureGrid animations fire immediately on load instead of on scroll. In the animated FeatureGrid component, update useInView to use { once: true, amount: 0.1 } — this waits until 10% of the element is visible before triggering.PricingSection highlighted tier loses its ring/border style in dark modeWhy: The highlighted tier likely uses a hardcoded color class (e.g. border-blue-500) rather than a semantic Tailwind variable. Hardcoded color classes don't automatically adapt to dark mode.
Fix: Replace the hardcoded border color class with 'border-primary' and ensure the --primary CSS variable is defined for both :root and .dark in globals.css.
The PricingSection highlighted tier border disappears in dark mode. Replace the hardcoded border color class with 'border-primary' and ensure the primary color CSS variable is defined for both :root and .dark in globals.css.
Stripe Checkout session fails with 'Cannot make live charges'Why: Either Stripe test keys are used with a live Checkout session request, or the Stripe account hasn't completed activation. Test keys and live keys must match their environments.
Fix: Verify STRIPE_SECRET_KEY in the V0 Vars panel starts with sk_test_ for development. Switch to live keys (sk_live_...) only after completing Stripe account activation at dashboard.stripe.com.
Stripe Checkout throws 'cannot make live charges'. Verify STRIPE_SECRET_KEY in the Vars panel starts with sk_test_ for development. Switch to live keys only after completing Stripe account activation.
Duplicate package.json entries after V0 adds Framer Motion in a background stepWhy: V0's agent sometimes adds dependencies twice in package.json during multi-step iterations — once explicitly and once as a side effect of another change.
Fix: Open package.json and remove any duplicate keys under 'dependencies'. Keep the higher version number if there are version conflicts. Then redeploy.
After V0 added Framer Motion, the build fails with duplicate package.json entries. Open package.json and remove any duplicate keys under 'dependencies'. Keep the higher version number if there are version conflicts.
Template vs. custom — the honest call
A forked template gets you far, fast. Here's where it holds up, and where you'll outgrow it.
The template is enough when
- You need a landing page live before your product launch and have no time to design from scratch
- You want opinionated section order (Hero → Features → Pricing → Footer) and just need to swap in your copy
- You're testing messaging on a new idea and want a credible-looking page fast
- Your pricing has 2-3 tiers and your features fit a 3-column grid
Go custom when
- Your landing page needs complex animations — GSAP timeline, 3D scroll effects, or parallax that Framer Motion's useInView can't produce
- You have 15+ feature categories that need a custom layout beyond the 3-column FeatureGrid
- You're building a marketing site that non-developers must update regularly — that needs a CMS like Sanity
- Your pricing is seat-based, usage-based, or requires a custom pricing calculator
RapidDev turns V0 landing pages like 237 into conversion-optimized sites with analytics, A/B testing setup, and real payment flows.
Frequently asked questions
Is the 237 template free?
Yes. The 237 template is a free community template on v0.dev. Forking it doesn't consume V0 credits. Subsequent AI edits in the chat do count against your credit allowance.
Can I use the 237 template for a commercial product?
Yes. V0 community templates are free to use for commercial projects. The underlying libraries — Next.js (MIT), shadcn/ui (MIT), Framer Motion (MIT) — are all permissively licensed. Review each library's license if you redistribute the template itself.
Why does my fork break in preview when I add Stripe or Supabase?
V0's preview sandbox loads dependencies via esm.sh. Server-only packages like Stripe's Node.js SDK or @supabase/ssr sometimes fail to load in the sandbox with import errors. This is a known V0 preview limitation — deploy to Vercel via Share → Publish and test Stripe and Supabase features on the live URL.
How do I connect a database to the waitlist form?
The template's waitlist form requires a Supabase connection. Add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in the V0 Vars panel, then use the medium-difficulty waitlist prompt on this page. Create the waitlist table in Supabase with RLS enabled so anon users can insert but not read other emails.
Why do the FeatureGrid animations fire on page load instead of when I scroll to them?
This happens when useInView is called without the once: true and amount: 0.1 options. Without those, the animation triggers immediately when the component mounts. Use the 'FeatureGrid animations fire on load' gotcha prompt on this page to fix it.
What does '237' mean?
The name '237' comes from the V0 community where template names are sometimes numeric or abstract. It doesn't refer to a version number or spec. The template's value is in the polished SaaS landing layout — the name is just an ID.
Can RapidDev help extend this template?
Yes. RapidDev takes V0 landing page starters like 237 further — adding analytics integrations, Stripe billing, CMS-backed copy management, and production-ready deployment pipelines for teams that need more than what V0 chat can scaffold.
Does the 237 template include a blog or content section?
No. The 237 template is a pure landing page (Hero → Features → Social Proof → Pricing → Footer). It doesn't include a blog or CMS integration. If you need a blog, pair it with the Documentation Starter template or add next-mdx-remote to the project.
Outgrowing the template?
RapidDev turns v0 prototypes into production apps — real auth, database, and payments — at $13K–$25K.
Book a free consultation30-min call. No commitment.
