UI kitComponents gallery

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.tsx

Full landing hero: eyebrow pill, headline, dual CTAs, a social-proof row, and the floating tech-icon cluster (the default visual).

NEWAll-in-one SaaS boilerplate

Build & launch your SaaS in days, not months

The most complete SaaS boilerplate for serious indie hackers. Auth, payments, emails, dashboards, and AI. Wired up, themed, and ready to ship.
slers
Trusted by +100 users

Hero (stack visual)

components/landing/hero/hero.tsx

The same Hero with its stack visual mode - the gradient HeroStack card on the right, exactly as the homepage renders it.

NEWAll-in-one SaaS boilerplate

Build & launch your SaaS in days, not months

The most complete SaaS boilerplate for serious indie hackers. Auth, payments, emails, dashboards, and AI. Wired up, themed, and ready to ship.
slers
Trusted by +100 users

HeroStack

components/landing/hero/hero-stack.tsx

Hero visual variant: a gradient headline card ringed by four capability cards that drift on independent loops.

Shipfaster- Production-ready SaaS
Auth
Email · OAuth · 2FA
Payments
Stripe · Polar
Emails
Resend · SES
AI Ready
Any provider

HeroImage

components/landing/hero/hero-image.tsx

Hero visual variant: a single product screenshot inside a frosted card with a primary-tinted glow.

Product demo screenshot

Content sections

StatsRow

components/landing/stats-row.tsx

Responsive row of headline metric tiles (launch time, savings, speed, reliability).

Launch to prod
<7 days
Dev time saved
+160 hrs
Setup time
5 min
Type safety
100%

Showcase

components/landing/showcase.tsx

Tech-stack showcase: categorised grid of hover/click-expandable cards built on ExpandableCard.

The stack

Built with the best modern tools

Opinionated defaults, swappable adapters. Everything you'd pick anyway, already wired up.

Core Stack

Next.js

Next.js

Full-stack meta-framework with SSR, file-based routing, and best-in-class DX.

Why we chose this

Server routes, hybrid rendering, and zero-config conventions let you focus on building features instead of wiring infrastructure.

Instead of

File-based routing, built-in data fetching, and first-class TypeScript support across the entire app.

shadcn/ui

shadcn/ui

Beautiful, accessible components you own and customize.

Why we chose this

Unlike other UI libraries, shadcn gives you the actual code. No version conflicts, no override gymnastics, just clean, modifiable components.

Instead of

Traditional component libraries lock you into their API. shadcn puts you in full control.

Hono

Hono

Ultra-fast, lightweight API framework that runs anywhere.

Why we chose this

Hono is blazing fast with a tiny footprint. It runs on Node, Bun, Cloudflare Workers, and more. True portability.

Instead of

Express is battle-tested but slower. Fastify is fast but less portable across runtimes.

Drizzle

Drizzle

Type-safe SQL with zero runtime overhead.

Why we chose this

Drizzle generates SQL you can read. No query builder abstraction leaking, just typed SQL with excellent migrations.

Instead of

Prisma has runtime overhead and generates opaque queries. Drizzle stays closer to SQL.

Services

Better Auth

Better Auth

Modern auth library with social providers and 2FA built-in.

Why we chose this

Better Auth is framework-agnostic and TypeScript-first. Social logins, magic links, and 2FA work out of the box.

Instead of

NextAuth is tightly coupled to Next.js. Custom auth is complex and error-prone.

Inngest

Inngest

Reliable background jobs and event-driven workflows.

Why we chose this

Inngest handles retries, scheduling, and complex workflows with a simple function-based API. No infrastructure to manage.

Instead of

BullMQ requires Redis setup. Raw queues need manual retry logic and monitoring.

Resend

Resend

Developer-friendly email API with React templates and analytics.

Why we chose this

Resend offers the best DX for email. React Email templates make designing emails enjoyable.

Instead of

Traditional email APIs lack modern tooling. Resend brings email into the React ecosystem.

Amazon SES

Amazon SES

Enterprise email delivery at scale with unmatched reliability.

Why we chose this

SES offers the lowest cost at scale with excellent deliverability. Perfect for transactional and bulk email.

Instead of

SendGrid and Mailgun are pricier at volume. Self-hosted email has deliverability challenges.

Payments & AI

Stripe

Stripe

Industry-standard payments with subscriptions, invoicing, and checkout.

Why we chose this

Stripe's API is the gold standard. Hosted checkout, subscription management, and fraud protection built-in.

Instead of

PayPal has worse DX. Building payment infrastructure yourself is a compliance nightmare.

Polar

Polar

Developer-first billing with open-source monetization built-in.

Why we chose this

Polar is designed for developers. Sponsorships, license keys, and usage-based billing with minimal setup.

Instead of

Stripe requires more setup for developer-specific use cases. Gumroad takes higher fees.

Vercel AI SDK

Vercel AI SDK

Unified API for building AI apps with any LLM provider.

Why we chose this

The AI SDK abstracts provider differences. Stream responses, tool calling, and structured output work consistently across models.

Instead of

Direct API calls mean provider lock-in. The SDK provides a consistent interface regardless of LLM.

Deployment

Vercel

Vercel

Zero-config deployments with edge functions and global CDN.

Why we chose this

Vercel makes deployment trivial. Git push to deploy, preview URLs, and edge functions for optimal performance.

Instead of

Self-hosting requires DevOps knowledge. Other platforms lack Vercel's framework integrations.

Railway

Railway

Simple infrastructure for developers with instant deploys.

Why we chose this

Railway handles databases, Redis, and services in one place. Simple pricing and excellent DX.

Instead of

AWS is complex. Heroku's free tier is gone. Railway offers the best balance of simplicity and power.

Docker

Docker

Containerize and run anywhere with full control over your stack.

Why we chose this

Docker ensures your app runs the same everywhere. Essential for self-hosting and complex deployments.

Instead of

VMs are heavier. Serverless has cold start issues. Docker gives you portability with control.

Coolify

Coolify

Self-hosted alternative to Heroku and Netlify on your own servers.

Why we chose this

Coolify gives you Vercel-like DX on your own infrastructure. Full control without vendor lock-in.

Instead of

CapRover is less polished. Dokku lacks the UI. Coolify is the most complete self-hosted PaaS.

DemoVideo

components/landing/demo-video.tsx

Click-to-play demo video poster that swaps in a YouTube embed on interaction.

See it in action

See GenerateSaaS in action

A 90-second tour of the starter, dashboard, billing, admin panel and AI tooling.

Demo video thumbnail

FeaturesGrid

components/landing/features-grid.tsx

Bento-style feature grid with icon tiles, headings, and optional media per cell.

Everything you need

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.

Transactional Email

Payments

Stripe integration with subscriptions, one-time payments, and customer portal ready to go.

Payments

Authentication

Complete auth system with email, social logins, magic links, and 2FA. Secure by default.

Authentication

Type-safe API

Hono API with end-to-end type safety, OpenAPI docs, and RPC client.

Type-safe API

SEO Optimized

Meta tags, sitemaps, structured data, and social sharing configured out of the box.

SEO Optimized

Background Jobs

Inngest-powered job queue for emails, webhooks, and scheduled tasks.

Background Jobs

FeaturesListicle

components/landing/features-listicle.tsx

Tabbed feature highlights that auto-rotate every few seconds until the visitor picks a tab.

Everything included

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.

Transactional Email

FeaturesAccordion

components/landing/features-accordion.tsx

Accordion feature list with a media preview that syncs to the active item.

Everything included

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.

Payments
Authentication
Type-safe API
SEO Optimized
Background Jobs
Transactional Email

HowItWorks

components/landing/how-it-works.tsx

Numbered step cards with icon tiles and a gradient connector line.

How it works

Get to launch in three moves

From clone to production in minutes, not months. Here's how easy it is to launch your SaaS.

1

Clone the starter

One CLI command pulls the full stack, installs dependencies, and sets up your .env file.

2

Tune the essentials

Drop in your brand, theme, and copy. Swap adapters. Add your products and pricing in minutes.

3

Ship to production

One-click deploy to Vercel, Railway, or any Docker host. SSL, emails, webhooks, all wired up.

ProblemSolution

components/landing/problem-solution.tsx

Side-by-side before/after comparison: a destructive-tinted problems card and a primary-tinted solutions card.

Why choose us

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.tsx

Masonry multi-column grid of testimonial cards with star ratings, quotes, and avatars.

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."

SC

Sarah Chen

Founder, TechStart

"Worth every penny. Production-ready out of the box."

DK

David Kim

Full Stack Developer

"Clean code, great DX. Shipped in days."

MJ

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."

JM

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."

ER

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."

AT

Alex Thompson

Engineering Lead, StartupCo

TestimonialsTriple

components/landing/testimonials-triple.tsx

Fixed three-column testimonial layout (the first three testimonials).

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."

SC

Sarah Chen

Founder, TechStart

"Clean code, great DX. Shipped in days."

MJ

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."

ER

Emily Rodriguez

CTO, LaunchPad

TestimonialsSmall

components/landing/testimonials-small.tsx

Compact trust strip: a row of overlapping avatars, a five-star rating, and an optional caption.

ALATGHKJ
Loved by builders shipping with the boilerplate

Pricing & conversion

Pricing

components/landing/pricing.tsx

Plan cards driven by the pricing config, with an interval toggle and auth-aware checkout CTAs.

Pricing

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

$299one-time
  • 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)

Agency

Build and resell for clients

$999one-time
  • Everything in Pro
  • Open-source projects allowed
  • Client & white-label work
  • Resell the products you build
  • Direct support: phone / Discord / Telegram
  • Lifetime updates & support
Instant license delivery

PricingComparison

components/landing/pricing-comparison.tsx

Feature comparison table with pricing tiers as columns and grouped feature rows.

Feature comparison

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 frameworkAll frameworksAll frameworks
Updates & support
Update window
1-year windowLifetimeLifetime
Support level
StandardPriorityDirect
Agency rights
Open-source projects
Client & white-label work

PricingProducts

components/landing/pricing-products.tsx

One-time and add-on product cards sourced from the pricing config.

One-time purchases

Available products

Enhance your experience with one-time purchases.

+1 Year of Updates & Support

Extend your Solo update window by another year

$99one-time
Requires Solo

Unlock All Frameworks

Use both Next.js and Nuxt with your Solo license

$99one-time
Requires Solo

FAQ

components/landing/faq.tsx

Accordion of frequently asked questions. Requires an items array - here the shared faqItems dataset.

FAQ

Everything else you might be wondering

Can't find what you're looking for? Drop us a line.

FinalCta

components/landing/final-cta.tsx

Closing 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.

Instant delivery
Lifetime updates
Unlimited projects

Shared primitives

SectionHeader

components/landing/section-header.tsx

Eyebrow badge, heading, and supporting copy that opens most landing sections.

Section

A section heading

Eyebrow badge, title, and supporting copy - the standard heading block for landing sections.

MarketingPagePill

components/landing/marketing-page-pill.tsx

Rounded eyebrow pill with an optional leading chip, used atop marketing and legal pages.

NewMarketing page pill

ExpandableCard

components/shared/expandable-card.tsx

Hover (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.

Next.js

Next.js

App Router, Server Components, and React 19 power the marketing site.

Framework

Next.js 16 with the App Router and React Server Components.

Rendering

Static-first with selective client interactivity where it counts.

Drizzle ORM

Drizzle ORM

Typed Postgres schema and queries with first-class migrations.

Database

Drizzle ORM over Postgres, fully type-safe end to end.

Migrations

Schema-first migrations generated straight from your tables.

Stripe

Stripe

Subscriptions, one-time products, and credits, wired end to end.

Billing

Checkout, the customer portal, and webhooks are pre-integrated.

Pricing

Plans and products are defined once in the pricing config.