Welcome to Sabo

Sabo is a production-ready Next.js 16 SaaS boilerplate with authentication, payments, analytics, and a complete marketing site to ship your product faster.

Sabo provides everything you need to launch a modern SaaS application: authentication with Supabase, Stripe payments, PostHog analytics, a beautiful marketing site, blog, changelog, and a dashboard with settings pages—all fully integrated and ready to customize.

What is Sabo?

Sabo is the trendiest Next.js 16 SaaS boilerplate built to take you from idea to production fast. Instead of wiring up authentication, billing, analytics, and marketing pages yourself, you start with a cohesive, type-safe foundation you can customize and deploy immediately.

Powered by Next.js 16, React 19, Tailwind CSS 4, and TypeScript 5, Sabo bundles Supabase authentication (email/password, OAuth, magic links), Stripe subscriptions with webhooks, PostHog analytics, MDX-based content, Playwright E2E tests, 57 ready-to-ship UI components, Resend-ready auth email workflows (configure Supabase SMTP to send via Resend), Better Stack status widgets, Vercel deployment automation, and more—all working together out of the box.

---

Who is Sabo For?

Sabo is ideal for:

• Solo founders shipping fast without building everything from scratch
• Small teams launching a new SaaS product with a proven foundation
• Developers learning modern Next.js patterns and best practices
• Agencies building client projects with consistent, maintainable architecture
• Anyone who wants production-ready code instead of scattered tutorials

---

What Makes Sabo Different?

Actually production-ready. Not just starter code. Sabo includes database migrations, a Stripe webhook handler, 16 E2E tests, complete deployment configuration, and documentation for wiring Supabase auth emails through Resend.

Modern stack. Built with Next.js 16, React 19, Tailwind CSS 4, TypeScript 5, Supabase, Stripe, PostHog, Better Stack, and Resend-ready email workflows, all following the latest best practices from 2024-2025.

Fully integrated. Authentication, payments, analytics, emails, and monitoring work seamlessly with proper error handling, loading states, and edge cases covered.

Exceptionally documented. Every feature has dedicated guides with code examples, setup steps, troubleshooting tips, and architectural context.

Battle-tested. Includes 16 E2E test files covering all critical user flows across Chromium, Firefox, WebKit, and mobile viewports.

---

Key Features

Authentication with Supabase

Complete authentication system with multiple sign-in methods and session management:

• Email/password - Sign-up with email verification, sign-in, and account management
• OAuth providers - Pre-configured Google, GitHub, and Apple sign-in
• Magic links - Passwordless authentication via email
• Password reset - Secure password reset flow with email confirmation
• Protected routes - Middleware-based route protection for dashboard and settings
• Session management - Server and client-side session handling with automatic refresh
• Auth context - React context provider for accessing user state throughout the app

See Auth with Supabase for setup, OAuth configuration, and flow diagrams.

Auth Emails with Resend

Customizable Supabase Auth emails delivered through Resend:

• Template customization - Update confirmation, magic link, and password reset templates
• Resend SMTP integration - Connect your custom domain with SPF, DKIM, and DMARC
• Deliverability guardrails - Disable tracking, add branded links, and avoid spam triggers
• End-to-end testing - Tabs covering confirmation, magic link, and password reset flows
• Flow diagrams - ASCII diagrams showing every email journey
• Troubleshooting - Common delivery issues with actionable fixes

See Auth Emails with Resend for setup, template editing, and production checklist.

Dashboard & Settings

Production-ready dashboard with sidebar navigation, settings pages, and data visualization:

• Collapsible sidebar - Responsive sidebar with navigation, team switcher, and user menu
• Settings pages - General settings, account management, billing, and notifications
• Interactive charts - Beautiful charts powered by Recharts with tooltips and legends
• Advanced data tables - Sortable, filterable tables with drag-drop reordering (@tanstack/react-table)
• User menu - Profile dropdown with account access and sign-out
• Notifications - Dropdown with sample notifications and action buttons
• Breadcrumb navigation - Context-aware breadcrumbs for page hierarchy
• Team switcher - Multi-workspace/organization selector component

See Dashboard Overview to understand structure and customize pages.

Marketing Site

Complete landing page with conversion-optimized sections:

• Hero section - Eye-catching hero with headline, subheading, and CTA buttons
• Features showcase - Three layout options: grid, bento grid, and accordion
• Social proof - Animated marquee with partner/customer logos
• Pricing page - Plan comparison with Free, Pro, and Enterprise tiers
• Testimonials - Customer quotes with avatars and company info
• FAQ accordion - Collapsible Q&A section with common questions
• Contact form - Validated form with Zod schema and API endpoint
• Responsive header - Desktop navigation with mobile hamburger menu
• Footer - Links, social icons, and optional Better Stack status badge

See Marketing Pages to customize each section and update content.

Payments with Stripe

Full subscription management with Stripe Checkout, Customer Portal, and webhook handling:

• Stripe Checkout - Pre-built checkout flow for subscriptions
• Customer Portal - Allow users to manage subscriptions, payment methods, and invoices
• Webhook handlers - Automatic subscription sync to database
• Multiple pricing plans - Free, Pro, Enterprise plans with monthly/yearly billing
• Database sync - Real-time subscription status updates to user_subscriptions table
• Payment history - Track all payment transactions in payment_history table
• Test mode support - Full test environment for development and QA

See Payments with Stripe for product setup, webhook configuration, and testing.

Content Management (MDX)

File-based content management with MDX for blog, changelog, and legal pages:

• Blog system - MDX posts with frontmatter (author, date, tags, thumbnail)
• Tag filtering - Client-side tag filtering on blog listing page
• Changelog system - Version-based releases with MDX content
• Legal pages - Privacy Policy, Terms of Service, Cookie Policy rendered from MDX
• Syntax highlighting - Code blocks with Shiki syntax highlighter
• GitHub Flavored Markdown - Tables, task lists, and extended Markdown support
• Dynamic routing - Automatic page generation from MDX files
• SEO metadata - Frontmatter automatically populates page metadata

See Blog and Changelog for content structure and frontmatter examples.

Analytics with PostHog

Optional product analytics for tracking user behavior and feature adoption:

• Automatic pageview tracking - Track all page visits automatically
• Custom events - Client-side and server-side event tracking
• User identification - Associate events with specific users
• User properties - Track user attributes and subscription status
• Feature flags - A/B testing and feature rollouts
• Session replay - Record user sessions (optional)
• Funnels and heatmaps - Analyze conversion paths and user interactions

PostHog is optional and only activates when NEXT_PUBLIC_POSTHOG_KEY is set.

See Analytics with PostHog for setup and event tracking patterns.

Database with Supabase

PostgreSQL database with Row Level Security and TypeScript types:

• User profiles - Extended user data (username, bio, profile image, preferences)
• Subscriptions - Stripe subscription data synced from webhooks
• Payment history - Transaction records with invoice URLs
• Stripe products - Product catalog for pricing plans
• Row Level Security - Database-level access control policies
• TypeScript types - Generated types for type-safe queries
• Migrations - SQL migration files for reproducible schema

See Database with Supabase for schema details and RLS policies.

Testing with Playwright

Comprehensive E2E testing across all critical user flows:

• 16 test spec files - Covering authentication, dashboard, marketing, blog, changelog, legal
• Cross-browser testing - Chromium, Firefox, and WebKit
• Mobile viewports - Pixel 5 and iPhone 12 device emulation
• Auth helpers - Pre-built helpers for authenticated test scenarios
• Parallel execution - Fast test runs with parallel test execution
• Visual debugging - UI mode for interactive test debugging
• HTML reports - Detailed test reports with screenshots and traces

See Testing with Playwright for running tests and writing new test cases.

Status Page Integration with Better Stack

Real-time system status badge powered by Better Stack:

• Status badge widget - Displays current system status in footer
• Theme sync - Automatically adapts to light/dark mode
• Better Stack integration - External monitoring and incident management
• Custom domain support - Use your own status page domain
• Hydration-safe - Prevents SSR/client hydration mismatches

See Status Page for Better Stack setup and customization.

SEO Optimization

Built-in SEO best practices and dynamic content generation:

• Dynamic sitemap - Auto-generated sitemap.xml including blog and changelog
• Robots.txt - Dynamic robots.txt generation
• Metadata API - Next.js Metadata API for all pages
• Open Graph images - Social sharing preview images
• Structured data - Schema.org markup for rich search results
• Semantic HTML - Proper heading hierarchy and ARIA labels

See SEO for customizing metadata and structured data.

57 UI Components

Complete component library from shadcn/ui and Magic UI:

Base Components (12)

• Button, Button Group, Badge, Card, Separator, Skeleton, KBD, Progress, Spinner, Toggle, Avatar, Tabs

Form Components (11)

• Input, Textarea, Select, Checkbox, Switch, Slider, Calendar, Label, Field, Input Group, Radio Group

Overlays (7)

• Dialog, Alert Dialog, Sheet, Drawer, Dropdown Menu, Tooltip, Popover

Data Display (5)

• Accordion, Collapsible, Scroll Area, Table, Chart

Navigation (3)

• Navigation Menu, Sidebar, Breadcrumb

Feedback (3)

• Alert, Toast, Empty

Magic UI Animated (11)

• Marquee, Animated Beam, Animated List, Animated Shiny Text, Bento Grid, Border Beam, Interactive Grid Pattern, Number Ticker, Orbiting Circles, Particles, Shine Border

Other (5)

• Confetti, Item, Sonner, Vaul (drawer), React Icons

See UI Components for usage examples and customization guides for each component.

Dark Mode & Theming

Complete dark mode support with next-themes:

• System preference detection - Respects user’s OS color scheme
• Manual toggle - Sun/moon icon toggles in header and dashboard
• Tailwind CSS integration - dark: variant for all components
• CSS variables - Theme colors defined as CSS custom properties
• Hydration-safe - No flash of unstyled content
• Component variants - All UI components support both themes

See Dark Mode for customizing theme colors and behavior.

Type Safety & Validation

Full TypeScript coverage with runtime validation:

• TypeScript 5 - Strict type checking throughout the codebase
• Database types - Generated Supabase types for tables and queries
• Zod schemas - Runtime validation for forms and API requests
• React Hook Form - Type-safe form handling with Zod integration
• API contracts - Type-safe API routes with validated request/response
• Path aliases - @/ imports for clean, maintainable code

All forms use Zod + React Hook Form for client-side validation, and all API routes validate requests with Zod on the server.

Developer Experience

Optimized development workflow with modern tooling:

• pnpm - Fast, disk-efficient package manager
• ESLint - Code linting with Next.js recommended config
• Prettier - Automatic code formatting with Tailwind CSS plugin
• TypeScript strict mode - Catch errors at compile time
• Hot reload - Fast refresh in development mode
• Environment validation - Type-safe environment variables
• Path aliases - Clean imports with @/ prefix

See Quickstart for setting up your development environment.

Deployment Ready with Vercel

Production-optimized configuration for Vercel:

• Automatic builds - Deploy on every push to main branch
• Preview deployments - Unique URL for every pull request
• Environment variables - Separate configs for production/preview/development
• Image optimization - Next.js Image component with Vercel CDN
• Edge runtime - Fast middleware execution at the edge
• Incremental Static Regeneration - Optimal caching for blog and changelog

See Deploy to Vercel for step-by-step deployment instructions.

---

Tech Stack

Sabo is built with modern, production-tested technologies. Every dependency is carefully chosen for reliability, performance, and developer experience.

Framework & Language

Technology	Purpose	Version
Next.js	React framework with App Router and Server Components	16.0.0
React	UI library with React Server Components	19.2.0
TypeScript	Type-safe JavaScript with strict mode	5.9.3

Styling & UI

Technology	Purpose	Version
Tailwind CSS	Utility-first CSS framework	4.1.17
shadcn/ui	Accessible component library (New York style)	Latest
Magic UI	Animated UI components	Latest
Radix UI	Unstyled, accessible UI primitives	Latest
Lucide React	Beautiful icon library	0.548.0
Tabler Icons	Additional icon set	3.35.0
React Icons	Popular icon libraries	5.5.0
next-themes	Dark mode support	0.4.6

Backend & Integrations

Technology	Purpose	Version
Supabase	PostgreSQL database + Authentication	2.81.1
@supabase/ssr	Server-side auth for Next.js	0.7.0
Stripe	Payment processing	19.3.1
@stripe/stripe-js	Stripe.js for client-side	8.4.0
PostHog	Product analytics	Client: 1.293.0, Node: 5.11.2
Resend	Transactional email via Supabase SMTP (optional)	Configured in Supabase

Forms & Validation

Technology	Purpose	Version
React Hook Form	Performant form state management	7.66.0
Zod	TypeScript-first schema validation	4.1.12
@hookform/resolvers	Zod + React Hook Form integration	5.2.2

Content Management

Technology	Purpose	Version
next-mdx-remote-client	MDX rendering in Server Components	2.1.7
gray-matter	Parse frontmatter from MDX files	4.0.3
remark-gfm	GitHub Flavored Markdown support	4.0.1
rehype-pretty-code	Beautiful code blocks with syntax highlighting	0.14.1
rehype-slug	Add IDs to headings for anchor links	6.0.0
Shiki	Syntax highlighter	3.15.0

Charts & Data Visualization

Technology	Purpose	Version
Recharts	React chart library	2.15.4
@tanstack/react-table	Headless table library with sorting, filtering	8.21.3
@dnd-kit	Drag-and-drop functionality	Core: 6.3.1

Utilities & Helpers

Technology	Purpose	Version
class-variance-authority	Component variants and class composition	0.7.1
clsx	Conditional class names	2.1.1
tailwind-merge	Merge Tailwind classes without conflicts	3.4.0
Motion	Framer Motion animation library	12.23.24
Sonner	Toast notifications	2.0.7
Vaul	Drawer component	1.1.2
canvas-confetti	Confetti animations	1.9.4
schema-dts	TypeScript definitions for Schema.org	1.1.5

Testing

Technology	Purpose	Version
Playwright	E2E testing framework	1.56.1

Development Tools

Technology	Purpose	Version
pnpm	Fast, efficient package manager	Latest
ESLint	Linting and code quality	9.39.1
Prettier	Code formatting	3.6.2
prettier-plugin-tailwindcss	Sort Tailwind classes automatically	0.7.1
@tailwindcss/typography	Beautiful typography defaults	0.5.19

---

What You Get

57 UI Components

Complete component library including forms, overlays, data display, navigation, and 11 animated Magic UI components.

16 E2E Test Files

Comprehensive tests covering authentication, dashboard, marketing pages, blog, changelog, and legal pages across multiple browsers and viewports.

Production-Ready

Optimized build configuration, SEO metadata, error handling, webhook implementations, and deployment guides for Vercel.

100% Type-Safe

Full TypeScript coverage with database types, API contracts, form schemas using Zod, and strict type checking.

---

Documentation Structure

This documentation is organized to help you get started quickly and go deep when needed:

Getting Started

Welcome to Sabo, installation guide, project structure, and quick setup.

Customization Guides

Customize branding, marketing pages, dashboard, theme, navigation, and content.

UI Components

Usage examples for all 57 shadcn/ui and Magic UI components.

Core Features

Authentication, payments, database, analytics, testing, emails, and routing.

Deployment

Deploy to Vercel with environment configuration and production setup.

API Reference

Complete endpoint documentation with request/response examples.

---

Next Steps

Ready to start building? Follow the quickstart guide to get Sabo running locally:

Quickstart Guide

Install dependencies, configure environment variables, run the database migration, and launch Sabo in under 10 minutes.

New to Next.js or Supabase? This documentation includes detailed explanations of how everything works, not just what to copy and paste. Every code snippet is explained in context.