Skip to main content
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

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

TechnologyPurposeVersion
Next.jsReact framework with App Router and Server Components16.0.0
ReactUI library with React Server Components19.2.0
TypeScriptType-safe JavaScript with strict mode5.9.3

​
Styling & UI

TechnologyPurposeVersion
Tailwind CSSUtility-first CSS framework4.1.17
shadcn/uiAccessible component library (New York style)Latest
Magic UIAnimated UI componentsLatest
Radix UIUnstyled, accessible UI primitivesLatest
Lucide ReactBeautiful icon library0.548.0
Tabler IconsAdditional icon set3.35.0
React IconsPopular icon libraries5.5.0
next-themesDark mode support0.4.6

​
Backend & Integrations

TechnologyPurposeVersion
SupabasePostgreSQL database + Authentication2.81.1
@supabase/ssrServer-side auth for Next.js0.7.0
StripePayment processing19.3.1
@stripe/stripe-jsStripe.js for client-side8.4.0
PostHogProduct analyticsClient: 1.293.0, Node: 5.11.2
ResendTransactional email via Supabase SMTP (optional)Configured in Supabase

​
Forms & Validation

TechnologyPurposeVersion
React Hook FormPerformant form state management7.66.0
ZodTypeScript-first schema validation4.1.12
@hookform/resolversZod + React Hook Form integration5.2.2

​
Content Management

TechnologyPurposeVersion
next-mdx-remote-clientMDX rendering in Server Components2.1.7
gray-matterParse frontmatter from MDX files4.0.3
remark-gfmGitHub Flavored Markdown support4.0.1
rehype-pretty-codeBeautiful code blocks with syntax highlighting0.14.1
rehype-slugAdd IDs to headings for anchor links6.0.0
ShikiSyntax highlighter3.15.0

​
Charts & Data Visualization

TechnologyPurposeVersion
RechartsReact chart library2.15.4
@tanstack/react-tableHeadless table library with sorting, filtering8.21.3
@dnd-kitDrag-and-drop functionalityCore: 6.3.1

​
Utilities & Helpers

TechnologyPurposeVersion
class-variance-authorityComponent variants and class composition0.7.1
clsxConditional class names2.1.1
tailwind-mergeMerge Tailwind classes without conflicts3.4.0
MotionFramer Motion animation library12.23.24
SonnerToast notifications2.0.7
VaulDrawer component1.1.2
canvas-confettiConfetti animations1.9.4
schema-dtsTypeScript definitions for Schema.org1.1.5

​
Testing

TechnologyPurposeVersion
PlaywrightE2E testing framework1.56.1

​
Development Tools

TechnologyPurposeVersion
pnpmFast, efficient package managerLatest
ESLintLinting and code quality9.39.1
PrettierCode formatting3.6.2
prettier-plugin-tailwindcssSort Tailwind classes automatically0.7.1
@tailwindcss/typographyBeautiful typography defaults0.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.