SaaS UI Components for Next.js & Nuxt
Every UI component the GenerateSaaS boilerplate ships, rendered live with its real defaults. Production-ready hero, pricing, FAQ, testimonial, and CTA sections, fully themed and responsive for both Next.js and Nuxt.
Hero & visual variants
Hero (floating visual)
components/landing/hero/hero.tsxFull landing hero: eyebrow pill, headline, dual CTAs, a social-proof row, and the floating tech-icon cluster (the default visual).
Build & launch your SaaS in days, not months

Hero (stack visual)
components/landing/hero/hero.tsxThe same Hero with its stack visual mode - the gradient HeroStack card on the right, exactly as the homepage renders it.
Build & launch your SaaS in days, not months
HeroStack
components/landing/hero/hero-stack.tsxHero visual variant: a gradient headline card ringed by four capability cards that drift on independent loops.
HeroImage
components/landing/hero/hero-image.tsxHero visual variant: a single product screenshot inside a frosted card with a primary-tinted glow.
Content sections
StatsRow
components/landing/stats-row.tsxResponsive row of headline metric tiles (launch time, savings, speed, reliability).
Showcase
components/landing/showcase.tsxTech-stack showcase: categorised grid of hover/click-expandable cards built on ExpandableCard.
Built with the best modern tools
Opinionated defaults, swappable adapters. Everything you'd pick anyway, already wired up.
Core Stack
Services
Payments & AI
Deployment
DemoVideo
components/landing/demo-video.tsxClick-to-play demo video poster that swaps in a YouTube embed on interaction.
See GenerateSaaS in action
A 90-second tour of the starter, dashboard, billing, admin panel and AI tooling.
FeaturesGrid
components/landing/features-grid.tsxBento-style feature grid with icon tiles, headings, and optional media per cell.
Ship faster with built-in features
Stop building the same features over and over. Focus on what makes your product unique.
Transactional Email
Send beautiful emails with React Email templates. Works with any provider.
Payments
Stripe integration with subscriptions, one-time payments, and customer portal ready to go.
Authentication
Complete auth system with email, social logins, magic links, and 2FA. Secure by default.
Type-safe API
Hono API with end-to-end type safety, OpenAPI docs, and RPC client.
SEO Optimized
Meta tags, sitemaps, structured data, and social sharing configured out of the box.
Background Jobs
Inngest-powered job queue for emails, webhooks, and scheduled tasks.
FeaturesListicle
components/landing/features-listicle.tsxTabbed feature highlights that auto-rotate every few seconds until the visitor picks a tab.
All the tedious plumbing, already done
Six essential systems that take weeks to build right. Pre-wired, typed, and documented.
Transactional Email
Send beautiful emails with React Email templates. Works with any provider.
FeaturesAccordion
components/landing/features-accordion.tsxAccordion feature list with a media preview that syncs to the active item.
All the tedious plumbing, already done
Six essential systems that take weeks to build right. Pre-wired, typed, and documented.
Send beautiful emails with React Email templates. Works with any provider.
HowItWorks
components/landing/how-it-works.tsxNumbered step cards with icon tiles and a gradient connector line.
Get to launch in three moves
From clone to production in minutes, not months. Here's how easy it is to launch your SaaS.
Clone the starter
One CLI command pulls the full stack, installs dependencies, and sets up your .env file.
Tune the essentials
Drop in your brand, theme, and copy. Swap adapters. Add your products and pricing in minutes.
Ship to production
One-click deploy to Vercel, Railway, or any Docker host. SSL, emails, webhooks, all wired up.
ProblemSolution
components/landing/problem-solution.tsxSide-by-side before/after comparison: a destructive-tinted problems card and a primary-tinted solutions card.
Why every hour before launch hurts
The stuff you have to build before you can build your product.
Without GenerateSaaS
- Stitching auth, OAuth, 2FA & RBAC from scratch
- Wrestling with Stripe webhooks & idempotency
- Designing a dashboard, admin panel, and settings
- Building email templates & deliverability
- Writing i18n, SEO & blog from zero
- Six weeks in, still no users, no feedback, no fun
With GenerateSaaS
- Auth, 2FA, SSO & teams, out of the box
- Typed Stripe & Polar integrations, tested webhooks
- Admin, dashboard, onboarding, billing, all themed
- Transactional emails with templates ready to send
- i18n, SEO, OG images & a blog, all included
- Focus on the hard problem: finding real customers
Social proof
TestimonialsGrid
components/landing/testimonials-grid.tsxMasonry multi-column grid of testimonial cards with star ratings, quotes, and avatars.
Loved by builders who actually launched
Real teams. Real traction.
"This saved me weeks of development time. The authentication and payments were set up perfectly from day one. I was able to focus entirely on my product's unique features instead of rebuilding the same infrastructure for the hundredth time."
Sarah Chen
Founder, TechStart
"Worth every penny. Production-ready out of the box."
David Kim
Full Stack Developer
"Clean code, great DX. Shipped in days."
Marcus Johnson
Senior Developer, ScaleUp
"Launched my SaaS in under a week. The Stripe integration alone saved me days of headaches. Subscriptions, one-time payments, webhooks, all handled beautifully. Even the customer portal was pre-configured."
Jessica Martinez
Indie Hacker
"Finally, a boilerplate that doesn't cut corners. Type safety throughout, great DX, and actually deployable. The Drizzle ORM setup with proper migrations was exactly what I needed. No more fighting with Prisma's limitations."
Emily Rodriguez
CTO, LaunchPad
"The best boilerplate I've used. Period. I've tried half a dozen others over the years and they all felt like disposable scaffolding. This one reads like a codebase a senior team would actually maintain, and it's the first time my team didn't immediately want to rewrite chunks of it on day two."
Alex Thompson
Engineering Lead, StartupCo
TestimonialsTriple
components/landing/testimonials-triple.tsxFixed three-column testimonial layout (the first three testimonials).
Loved by builders who actually launched
Real teams. Real traction.
"This saved me weeks of development time. The authentication and payments were set up perfectly from day one. I was able to focus entirely on my product's unique features instead of rebuilding the same infrastructure for the hundredth time."
Sarah Chen
Founder, TechStart
"Clean code, great DX. Shipped in days."
Marcus Johnson
Senior Developer, ScaleUp
"Finally, a boilerplate that doesn't cut corners. Type safety throughout, great DX, and actually deployable. The Drizzle ORM setup with proper migrations was exactly what I needed. No more fighting with Prisma's limitations."
Emily Rodriguez
CTO, LaunchPad
TestimonialsSmall
components/landing/testimonials-small.tsxCompact trust strip: a row of overlapping avatars, a five-star rating, and an optional caption.
Pricing & conversion
Pricing
components/landing/pricing.tsxPlan cards driven by the pricing config, with an interval toggle and auth-aware checkout CTAs.
Pick a plan that fits
One-time purchase. Own it forever. Pick your plan and start shipping.
Solo
For solo devs shipping their own products
- Next.js or Nuxt: pick one framework
- 1 year of updates & support
- Unlimited private & commercial projects
- Own it forever: keep every version in your window
- Closed-source / private projects only
- One framework (unlock both for $99)
Pro
Every framework, updates forever
- Everything in Solo
- All frameworks: Next.js and Nuxt
- Lifetime updates & support
- Priority support
Agency
Build and resell for clients
- Everything in Pro
- Open-source projects allowed
- Client & white-label work
- Resell the products you build
- Direct support: phone / Discord / Telegram
- Lifetime updates & support
PricingComparison
components/landing/pricing-comparison.tsxFeature comparison table with pricing tiers as columns and grouped feature rows.
Compare all features
See exactly what's included in each tier to make the right choice for your project.
| Feature | Solo $299 | Pro $499 | Agency $999 |
|---|---|---|---|
| License & projects | |||
Unlimited projects (private & commercial) | |||
Perpetual license, own it forever | |||
Frameworks | One framework | All frameworks | All frameworks |
| Updates & support | |||
Update window | 1-year window | Lifetime | Lifetime |
Support level | Standard | Priority | Direct |
| Agency rights | |||
Open-source projects | |||
Client & white-label work | |||
PricingProducts
components/landing/pricing-products.tsxOne-time and add-on product cards sourced from the pricing config.
Available products
Enhance your experience with one-time purchases.
+1 Year of Updates & Support
Extend your Solo update window by another year
Unlock All Frameworks
Use both Next.js and Nuxt with your Solo license
FAQ
components/landing/faq.tsxAccordion of frequently asked questions. Requires an items array - here the shared faqItems dataset.
Everything else you might be wondering
Can't find what you're looking for? Drop us a line.
FinalCta
components/landing/final-cta.tsxClosing call-to-action band: radial-gradient card with a primary/secondary button pair and trust badges.
Stop configuring, start shipping
Stop fighting the tools. Get back to the product.
Shared primitives
SectionHeader
components/landing/section-header.tsxEyebrow badge, heading, and supporting copy that opens most landing sections.
A section heading
Eyebrow badge, title, and supporting copy - the standard heading block for landing sections.
MarketingPagePill
components/landing/marketing-page-pill.tsxRounded eyebrow pill with an optional leading chip, used atop marketing and legal pages.
ExpandableCard
components/shared/expandable-card.tsxHover (desktop) or tap (mobile) card that expands inline to reveal a details grid. Pass an image string, never an icon function, from a Server Component.