> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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
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](/core-features/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](/core-features/auth-emails) 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](/customization-guides/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](/customization-guides/marketing-pages/hero) 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](/core-features/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](/customization-guides/content-management/blog) and [Changelog](/customization-guides/content-management/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](/core-features/analytics-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](/core-features/database-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](/core-features/testing-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](/core-features/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](/core-features/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](/customization-guides/ui/overview) 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](/customization-guides/theme/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](/getting-started/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](/deployment/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](https://next.js.org/) | React framework with App Router and Server Components | 16.0.0 |
| [React](https://react.dev/) | UI library with React Server Components | 19.2.0 |
| [TypeScript](https://www.typescriptlang.org/) | Type-safe JavaScript with strict mode | 5.9.3 |
### Styling & UI
| Technology | Purpose | Version |
| --------------------------------------------------------- | --------------------------------------------- | ------- |
| [Tailwind CSS](https://tailwindcss.com/) | Utility-first CSS framework | 4.1.17 |
| [shadcn/ui](https://ui.shadcn.com/) | Accessible component library (New York style) | Latest |
| [Magic UI](https://magicui.design/) | Animated UI components | Latest |
| [Radix UI](https://www.radix-ui.com/) | Unstyled, accessible UI primitives | Latest |
| [Lucide React](https://lucide.dev/) | Beautiful icon library | 0.548.0 |
| [Tabler Icons](https://tabler.io/icons) | Additional icon set | 3.35.0 |
| [React Icons](https://react-icons.github.io/react-icons/) | Popular icon libraries | 5.5.0 |
| [next-themes](https://github.com/pacocoursey/next-themes) | Dark mode support | 0.4.6 |
### Backend & Integrations
| Technology | Purpose | Version |
| ------------------------------------------------------------------ | ------------------------------------------------ | ----------------------------- |
| [Supabase](https://supabase.com/) | PostgreSQL database + Authentication | 2.81.1 |
| [@supabase/ssr](https://supabase.com/docs/guides/auth/server-side) | Server-side auth for Next.js | 0.7.0 |
| [Stripe](https://stripe.com/) | Payment processing | 19.3.1 |
| [@stripe/stripe-js](https://stripe.com/docs/js) | Stripe.js for client-side | 8.4.0 |
| [PostHog](https://posthog.com/) | Product analytics | Client: 1.293.0, Node: 5.11.2 |
| [Resend](https://resend.com/) | Transactional email via Supabase SMTP (optional) | Configured in Supabase |
### Forms & Validation
| Technology | Purpose | Version |
| ------------------------------------------------------------------- | ---------------------------------- | ------- |
| [React Hook Form](https://react-hook-form.com/) | Performant form state management | 7.66.0 |
| [Zod](https://zod.dev/) | TypeScript-first schema validation | 4.1.12 |
| [@hookform/resolvers](https://github.com/react-hook-form/resolvers) | Zod + React Hook Form integration | 5.2.2 |
### Content Management
| Technology | Purpose | Version |
| ------------------------------------------------------------------------------ | ---------------------------------------------- | ------- |
| [next-mdx-remote-client](https://www.npmjs.com/package/next-mdx-remote-client) | MDX rendering in Server Components | 2.1.7 |
| [gray-matter](https://github.com/jonschlinkert/gray-matter) | Parse frontmatter from MDX files | 4.0.3 |
| [remark-gfm](https://github.com/remarkjs/remark-gfm) | GitHub Flavored Markdown support | 4.0.1 |
| [rehype-pretty-code](https://rehype-pretty.pages.dev/) | Beautiful code blocks with syntax highlighting | 0.14.1 |
| [rehype-slug](https://github.com/rehypejs/rehype-slug) | Add IDs to headings for anchor links | 6.0.0 |
| [Shiki](https://shiki.style/) | Syntax highlighter | 3.15.0 |
### Charts & Data Visualization
| Technology | Purpose | Version |
| ---------------------------------------------------------- | ---------------------------------------------- | ----------- |
| [Recharts](https://recharts.org/) | React chart library | 2.15.4 |
| [@tanstack/react-table](https://tanstack.com/table/latest) | Headless table library with sorting, filtering | 8.21.3 |
| [@dnd-kit](https://dndkit.com/) | Drag-and-drop functionality | Core: 6.3.1 |
### Utilities & Helpers
| Technology | Purpose | Version |
| ----------------------------------------------------------- | ---------------------------------------- | -------- |
| [class-variance-authority](https://cva.style/docs) | Component variants and class composition | 0.7.1 |
| [clsx](https://github.com/lukeed/clsx) | Conditional class names | 2.1.1 |
| [tailwind-merge](https://github.com/dcastil/tailwind-merge) | Merge Tailwind classes without conflicts | 3.4.0 |
| [Motion](https://motion.dev/) | Framer Motion animation library | 12.23.24 |
| [Sonner](https://sonner.emilkowal.ski/) | Toast notifications | 2.0.7 |
| [Vaul](https://vaul.emilkowal.ski/) | Drawer component | 1.1.2 |
| [canvas-confetti](https://www.kirilv.com/canvas-confetti/) | Confetti animations | 1.9.4 |
| [schema-dts](https://github.com/google/schema-dts) | TypeScript definitions for Schema.org | 1.1.5 |
### Testing
| Technology | Purpose | Version |
| ------------------------------------- | --------------------- | ------- |
| [Playwright](https://playwright.dev/) | E2E testing framework | 1.56.1 |
### Development Tools
| Technology | Purpose | Version |
| ------------------------------------------------------------------------------------------ | ----------------------------------- | ------- |
| [pnpm](https://pnpm.io/) | Fast, efficient package manager | Latest |
| [ESLint](https://eslint.org/) | Linting and code quality | 9.39.1 |
| [Prettier](https://prettier.io/) | Code formatting | 3.6.2 |
| [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) | Sort Tailwind classes automatically | 0.7.1 |
| [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin) | Beautiful typography defaults | 0.5.19 |
***
## What You Get
Complete component library including forms, overlays, data display, navigation, and 11 animated Magic UI components.
Comprehensive tests covering authentication, dashboard, marketing pages, blog, changelog, and legal pages across multiple browsers and viewports.
Optimized build configuration, SEO metadata, error handling, webhook implementations, and deployment guides for Vercel.
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:
Welcome to Sabo, installation guide, project structure, and quick setup.
Customize branding, marketing pages, dashboard, theme, navigation, and content.
Usage examples for all 57 shadcn/ui and Magic UI components.
Authentication, payments, database, analytics, testing, emails, and routing.
Deploy to Vercel with environment configuration and production setup.
Complete endpoint documentation with request/response examples.
***
## Next Steps
Ready to start building? Follow the quickstart guide to get Sabo running locally:
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.