The Modern Next.js SaaS Boilerplate
Get started with Vibestacks, the complete SaaS starter kit featuring Next.js 16, React 19, Tailwind CSS v4, and Better Auth. Build and ship production-ready apps faster.
Introduction
Welcome to Vibestacks - the modern Next.js boilerplate for building production-ready SaaS applications. We've assembled the best tools in the industry, integrated them seamlessly, and optimized everything so you can focus on building your product instead of configuring infrastructure.
Whether you're launching your first SaaS or your tenth, Vibestacks gives you a head start with authentication, payments, emails, analytics, and more - all wired up and ready to ship.
Prerequisites
This guide assumes basic familiarity with React and Next.js. If you're new to Next.js, we recommend reviewing the official documentation first.
The Modern Stack, Perfected
We've curated the best tools in the industry so you don't have to. Every dependency is integrated, optimized, and ready to ship.
Core Framework
| Technology | Description |
|---|---|
| Next.js 16 | The React framework for the web. App Router, Server Actions, and Turbopack. |
| React 19 | The latest React with Server Components, Actions, and improved performance. |
| TypeScript | Strict typing by default. Catch errors before they hit production. |
| Tailwind CSS v4 | Utility-first CSS with the new CSS-based configuration system. |
UI & Components
| Technology | Description |
|---|---|
| shadcn/ui | Beautifully designed, accessible components you own and customize. |
| Magic UI | Highly interactive components to make your landing page stand out. |
| Tailark | Marketing blocks and sections designed for SaaS conversions. |
| Framer Motion | Production-ready animations and gestures for React. |
Authentication & Payments
| Technology | Description |
|---|---|
| Better Auth | Complete auth with Google, GitHub, Magic Links, email/password, and 2FA. |
| Stripe | Accept payments, manage subscriptions, and handle webhooks instantly. |
Database & ORM
| Technology | Description |
|---|---|
| Drizzle ORM | Type-safe database queries with excellent DX and performance. |
| PostgreSQL | The world's most advanced open source relational database. |
| Docker | Local development with containerized PostgreSQL. |
AI Integration
| Technology | Description |
|---|---|
| Vercel AI SDK | Stream responses from OpenAI, Anthropic, and other providers with a unified API. |
Email & Communications
| Technology | Description |
|---|---|
| Resend | Modern email API with React templates for transactional emails. |
| React Email | Build emails using React components with live preview. |
Analytics & Monitoring
| Technology | Description |
|---|---|
| PostHog | Product analytics, feature flags, session recording, and heatmaps. |
| Sentry | Application monitoring and error tracking to fix bugs faster. |
Developer Experience
| Technology | Description |
|---|---|
| T3 Env | Type-safe environment variables with build-time validation. |
| Zod | Schema validation for forms, API inputs, and configuration. |
| Zustand | Lightweight, fast state management without boilerplate. |
| ESLint | Code quality and consistency with Next.js best practices. |
Infrastructure & Deployment
| Technology | Description |
|---|---|
| Vercel | One-click deployment with preview environments and edge functions. |
| Docker | Containerization ready. Deploy anywhere with a simple Dockerfile. |
| Cloudflare | DNS, CDN, and DDoS protection. Optimized for edge deployment. |
Documentation & Content
| Technology | Description |
|---|---|
| Fumadocs | Beautiful documentation and blog powered by MDX. |
| next-intl | Full i18n support with routing and translations. |
What's Included
Vibestacks isn't just a starter template - it's a complete foundation with features already built:
- Landing Page - Conversion-optimized marketing page with animations
- Authentication - Sign up, sign in, password reset, OAuth, 2FA
- Dashboard - Protected user area with sidebar navigation
- Billing - Stripe integration with subscription management
- Email System - Transactional emails with React templates
- Blog - MDX-powered blog with SEO optimization
- Documentation - This documentation site, ready to customize
- Analytics - PostHog integration for product insights
- Error Tracking - Sentry integration for monitoring
Quick Start
Get Vibestacks running in under 5 minutes:
# Clone the repository
git clone https://github.com/YOUR_USERNAME/vibestacks.git my-saas
cd my-saas
# Install dependencies
pnpm install
# Run the setup script
pnpm setup
# Start the development server
pnpm devOpen http://localhost:3000 to see your app.
Installation
Step-by-step setup guide
Environment Setup
Configure your environment variables
Database Setup
Connect and configure your database
IDE Setup
Optimize your development environment
Official Documentation
For deeper understanding of the underlying technologies, refer to their official docs:
Pro Tip
Add these documentation links to your Cursor docs panel for quick reference while coding. See our IDE Setup guide for instructions.
| Technology | Documentation |
|---|---|
| Next.js | nextjs.org/docs |
| Drizzle ORM | orm.drizzle.team/docs |
| Tailwind CSS | tailwindcss.com/docs |
| shadcn/ui | ui.shadcn.com |
| Better Auth | better-auth.com/docs |
| Stripe | stripe.com/docs |
| Vercel AI SDK | sdk.vercel.ai/docs |
| Resend | resend.com/docs |
| PostHog | posthog.com/docs |
| Sentry | docs.sentry.io |
| T3 Env | env.t3.gg/docs |
| Fumadocs | fumadocs.vercel.app |
Getting Help
Stuck on something? Here's how to get support:
- Search this documentation - Most common questions are covered here
- Check our blog - Technical deep-dives and tutorials at vibestacks.io/blog
- Join our Discord - Get help from the community
- Contact support - Reach us at support@vibestacks.io
Next Steps
Ready to build? Start here: