Multi-factor authentication
Users enroll an authenticator app and are challenged for a code at sign-in.
Which React SaaS boilerplate should you pick?
Pick the framework first; the SaaS features are the same across kits. These are the questions that actually decide it.
You want the default choice and the most docs
Choose the Next.js SaaS starter kit. It is the flagship: Next.js 16 App Router, React Server Components, Server Actions, and Cache Components. It comes with Supabase, or with Better Auth on the Next.js Drizzle SaaS starter kit or the Next.js Prisma SaaS starter kit.
You want Vite and a portable Node server
Choose the TanStack Start boilerplate. File-based routing that is type-safe end to end through TanStack Router, server functions instead of Server Actions, and a Vite and Nitro build that runs on any Node host. Drizzle, Prisma, or Supabase variants.
You came from Remix, or want loaders and actions
Choose the React Router SaaS starter kit. React Router 8 with Supabase, using the loader and action model Remix popularized. Remix itself merged into React Router, which the Remix SaaS boilerplate page explains.
You need iOS and Android apps too
Choose the React Native SaaS starter kit. An Expo app next to the Next.js web app in one monorepo, sharing one Supabase project and the same RLS policies. Checkout stays on the web to avoid app store commission.
Still weighing Next.js against TanStack Start? Read our TanStack Start vs Next.js comparison. Choosing an auth provider? See the Better Auth SaaS starter kit.
MakerKit's React SaaS boilerplates compared
Four React SaaS boilerplates, one SaaS layer: pick the framework your team already knows. All of them use React 19, TypeScript, Tailwind CSS 4, Shadcn UI, and a Turborepo monorepo.
| Kit | Framework | Data layer | Auth | Best for |
|---|---|---|---|---|
| Next.js + Supabase | Next.js 16 App Router | Supabase Postgres, RLS | Supabase Auth | Most B2B SaaS; the flagship kit |
| Next.js + Drizzle | Next.js 16 App Router | Any Postgres via Drizzle | Better Auth | Teams that want SQL-like queries and no BaaS |
| Next.js + Prisma | Next.js 16 App Router | Postgres via Prisma 7 | Better Auth | Teams already fluent in Prisma |
| TanStack Start | TanStack Start, Vite, Nitro | Drizzle, Prisma, or Supabase | Better Auth or Supabase Auth | Type-safe routing, no Next.js |
| React Router 8 | React Router 8 | Supabase Postgres, RLS | Supabase Auth | Remix users, loader/action fans |
| React Native (Expo) | Expo + Next.js monorepo | Supabase Postgres, RLS | Supabase Auth | SaaS that needs native mobile apps |
What every MakerKit React kit includes
The parts an AI agent can scaffold in an afternoon but rarely gets right: tenant isolation, billing webhooks, and role checks. Your agent builds your product on top of them.
Authentication
- Email and password
- OAuth providers
- Magic links
- TOTP multi-factor auth
- Password reset
- Email verification
Billing
- Stripe subscriptions
- Per-seat pricing
- Metered usage
- One-off payments
- Customer portal
- Webhook handling
Multi-tenancy
- Personal and team accounts
- Role-based permissions
- Custom roles
- Email invitations
- Team switching
- Billing per account
Operations and AI tooling
- Super admin panel
- User and account management
- Playwright E2E tests
- i18n
- MCP server for agents
- AGENTS.md and CLAUDE.md rules
Feature coverage differs slightly per kit, and the React Native app keeps checkout on the web. Each kit's landing page and docs list what it ships. For the architecture behind the team model, read our guide to multi-tenant SaaS architecture.
How licensing works across frameworks
You buy a kit by data stack, not by framework. The Supabase license covers Next.js 16, React Router 8, and TanStack Start. The Drizzle and Prisma licenses cover Next.js 16 and TanStack Start. The React Native kit is a variant of the Next.js Supabase kit.
Every license is a one-time payment with lifetime updates and unlimited projects. Pro is for one developer; Teams covers up to five collaborators. The license terms have the details, including client work.
Inside MakerKit
your-saas
> Add a projects table scoped to team accounts
Context your harness loads
Root rules first, then the folder the agent works in
AGENTS.md1apps/web/AGENTS.md2supabase/AGENTS.md3app/admin/AGENTS.mdpackages/ui/AGENTS.mdpackages/next/AGENTS.mdpackages/features/AGENTS.md
Products built on MakerKit
AmplefoundAI-organic growth agent
GondlaThe first content engine designed for Hybrid Search Visibility
ConvoQualitative Research At Scale
QA.techShip faster with AI agents that create and run your QA tests
ReplybossFind relevant posts on X. Grow faster and sell more.
ReplenoInventory management for craft & small businesses
See 16 more products from MakerKit customers +
- Badvisor · Unlock the Power of Web 3D
- iMaintain · Smarter Care for Everything You Own
- Blastra · Get In Front Of The Right Audience In One Go
- SNutils · Superpowers for ServiceNow Professionals
- Videotok · Create viral TikToks and Reels from text to video with AI
- Nero AI · The LLM powered scraper for LLM Apps
- FormLabs · Create & Analyze Your Bespoke Survey in Seconds
- Permitful · Permit tracking for architects
- Revarta · Practice Interviews to Land your Next Job
- ExtensionAuditor · Scan Browser Extensions. Detect Hidden Threats
- ShortlistIQ · AI Powered screening and hiring
- CareerKit · AI-powered career coaching for software engineers
- ChefGPT · AI-powered digital Chef to the rescue for never-ending delicious meals
- Superlines · The AI tool for Marketing
- YTSummary · Get the gist of any YouTube video with AI summaries
- CodeSnippets AI · GPT-4 and collaborate with your team to build your secure code snippets library
React 19Pick the React framework, keep the SaaS architecture
One React SaaS boilerplate, four ways to ship it
Next.js 16, TanStack Start, React Router 8, or React Native with Expo next to the Next.js Supabase app. Components, forms, hooks, and Shadcn UI look the same in each. What changes is how data reaches the page.
Authentication
Sign-in your users already expect
Password, magic link, passkeys, OAuth and multi-factor authentication, with the emails that go with them.
Transactional emails
Templates written in JSX with React Email, sent through Resend or Nodemailer (SMTP).
Every sign-in method
Password, magic link and social sign-in, configured per environment.
Passkeys
Opt-in sign-in with Face ID, Touch ID, Windows Hello or a security key. No password to phish.
Magic links
Passwordless sign-in: users get a one-time link by email instead of typing a password.
Accounts and billing
Everything a multi-tenant B2B SaaS needs
The multi-tenant SaaS boilerplate parts: auth, billing, teams with roles, and a super admin that can impersonate or ban users and teams, plus the screens your customers use to manage them.
Roles and permissions
Roles map to permissions that your code and your database policies both check.
Customer portal
Users change plans, update payment methods and download invoices without a support ticket.
Team accounts
Users belong to several teams and switch between them, or work in their personal account.
Billing webhooks
Flat, per-seat and metered subscriptions through Stripe Checkout, with webhooks that keep plans and seats in sync with your database.
Swappable providers
Billing, email, CMS and monitoring sit behind interfaces, so changing provider is configuration, not a rewrite.
Internationalization
Every UI string comes from translation files, so adding a language is content work.
Built for coding agents
Guardrails your agent works inside
Rules, an MCP server, skills and strict checks keep generated code in the kit’s patterns.
Agent rules
AGENTS.md files at the root and in each package teach coding agents the kit’s conventions.
Strict code standards
Strict TypeScript and linting across the monorepo, so type errors surface before your users find them.
MCP server
Gives Claude Code, Cursor, Codex and Gemini structured access to the kit: database, components, translations, checks and PRDs.
E2E tests with Playwright
Tests for authentication, team accounts and invitations, written with page objects you can extend.
You own the code
The full source lives in your repository. Nothing is hidden behind a package you cannot edit.
Agent skills
Slash commands for the work agents get wrong. /rls-review writes cross-tenant attacks as PgTAP tests and runs them; /reviewer reviews the diff and /bug-hunt sweeps the codebase.
Also included
Everything else, already wired up
The parts nobody lists until they are missing: content, deployment, documentation, and people to ask when you get stuck.
Interface
- Shadcn UI and Tailwind CSS v4One theme file restyles the app and the marketing site
- Dark and light themesEvery component supports both, with a toggle built in
- Mobile-friendly layoutsResponsive app shell, sidebar and marketing pages
- Figma UI kitThe same components, for designing screens before you build them
Content
- Blog and CMSKeystatic, WordPress or Supabase behind one interface
- Help centerDocumentation pages for your own customers
- SEO basicsPer-page metadata and a generated sitemap
Platform
- Serverless or NodeDeploy serverless or to a long-running server, with guides for both
- PluginsTestimonials, feedback, roadmap and waitlist, added when you need them
- MonitoringSentry, PostHog or SigNoz behind one interface
- Realtime notificationsIn-app, over Supabase Realtime on the Supabase kits
Learning and support
- DocumentationFor every kit, from install to production
- MakerKit courseBuild and launch a SaaS on the kit, step by step
- DiscordAsk Giancarlo and other builders directly
From clone to product code in one session
A production-ready React SaaS Boilerplate
The setup, stack, and tooling are decided, so your first commit is a product feature.
Quick Setup
Clone the repository, install dependencies, and start the dev server: the full SaaS runs locally, not a demo shell.
Modern Tech Stack
Built on Next.js 16 or TanStack Start, with React 19, Zod 4, Shadcn UI, Tailwind CSS 4, and TypeScript 7 (Go). Upgrades land through the public changelog.
High standards
Strict TypeScript, Oxlint, and oxfmt configured across the monorepo. The Rust-based Oxc toolchain keeps lint and format feedback fast as the codebase grows.
Authentication made easy
Authentication
Password, magic link, passkey, and social sign-in, plus MFA, with the email flows that go with them.
Email/Password
Secure email/password authentication with built-in password reset, email verification, and account recovery flows.
Magic Link
Passwordless sign-in: users click a link in their inbox and skip the password entirely.
Passkey
WebAuthn passkeys: users sign in with Face ID, Touch ID, Windows Hello, or a hardware security key. Phishing-resistant, with nothing to reset.
Social Sign-in
Google, GitHub, Facebook, X, Discord, and many more OAuth providers ready to configure.
Multi-Factor Authentication
TOTP-based MFA to protect your users' accounts, with enrollment and challenge screens included.
Multi-tenant SaaS from day one
Multi-Tenancy
Personal and team accounts, invitations, and role-based access control, modeled in the database rather than bolted on in app code.
Organizations and Teams
Full B2B multi-tenancy support. Let customers create workspaces, manage teams, and collaborate securely.
Team Invitations
Email-based invitation system with role assignment. Onboard team members with a single link.
Roles and Permissions
Granular role-based access control (RBAC). Define custom roles and permissions that match your product's needs.
Get Paid
Billing
Subscriptions with Stripe and other providers, including per-seat and metered billing, for personal and team accounts.
Stripe Checkout
Stripe Checkout handles cards, Apple Pay, Google Pay, and other payment methods.
Stripe Customer Portal
Self-service subscription management. Customers update payment methods, view invoices, and cancel without opening a support ticket.
Flexible Pricing Models
Per-seat, usage-based, flat-rate subscriptions, or one-time purchases. Plans live in one billing schema that checkout and the pricing table both read.
Manage accounts from the Super Admin panel
Admin Panel
Manage your users, organizations, and build your own internal tooling within the app.
Super Admin
See users, organizations, and subscriptions in one dashboard, restricted to super admins.
Account Management
Explore, impersonate users, ban/delete accounts, all without touching the database.
UI you extend, not rebuild
Delightful UI, Built to Extend
Screens for every flow, built from the same Shadcn UI components you will use for your own features.
Landing Page
A landing page template with hero, features, pricing, and call-to-action sections to adapt to your product.
Dashboard/Charts Demo
Dashboard demo components with charts, ready to wire to your own data.
Shadcn UI Components
Every Shadcn UI component pre-installed and themed. Browse, copy, and customize from our built-in dev tools.
Pricing Table
A pricing table generated from your billing config: change a price in one place and the page follows.
Marketing, SEO, and Content
Marketing
Get found by your target audience with blog, documentation, changelog, and more.
Blog
A blog for product updates and SEO content, with per-post metadata and sitemap entries.
Documentation/Help Center
Reduce support load and improve user onboarding with the built-in documentation. Educate users and drive traffic to your product.
Changelog
Keep users engaged with product updates. Announce features, fixes, and improvements in a dedicated changelog.
Debug and Test your SaaS
Monitoring and Testing
Comprehensive monitoring and testing tools to help you keep your SaaS running smoothly.
Playwright E2E Testing
Pre-configured end-to-end tests for critical user flows. Ship with confidence, catch regressions before your users do.
Sentry, Signoz, PostHog, and more
Plug-and-play support for Sentry, PostHog, Signoz, and more. Monitor errors, track analytics, and debug production issues.
Help from the person who wrote the code
Support and Community
Ask me and the MakerKit community on Discord about setup, kit-related issues, and how the codebase fits together.
What customers say
Developers and founders on the kits, the docs and the support. Every quote links to the original post.
just wanna say thanks to @gc_psk for building @makerkit_dev . it is such an overpowered template. like finally we have a really good one with active development, good docs and now even cursorrules/windsurfrules to just sit down and see ai agents do the stuff. truly mindblowing.
Built and maintained full-time by Giancarlo, a software engineer with almost 15 years of experience at startups and enterprises. Support questions reach me directly.
Founder interviews:Rob, Provider.appSebastian, WatchthisMichael, ChatFlow
My favorite so far is @gc_psk and @makerkit_dev ship cursor rules along with updates to the framework. That's been really useful to pull in new version (via git remote) and things stay in sync.
Just started using MakerKit and it's a total game-changer. 🚀 Wish I had this when I was building Phishr. Instant team management and billing? Insane.
Second that! Giancarlo provides amazing support!! 😄
You need to check @makerkit_dev by @gc_psk — it’s the best I’ve seen so far. It’s feature complete, plenty examples, amazing docs, great Discord community, the dude provides support even days after his weeding (which is crazy!) I’m not affiliated in every way, just a happy cx.
Honestly @makerkit_dev is great. More for B2B products but really clean and well documented.
Amazing! @gc_psk has built a masterpiece with this one!
I just stumbled upon @makerkit_dev (and you!), it's impressive, I thought it was a big team behind how many features I saw (and I've been working in software a long time!) I was just looking for a free boilerplate, but the lifetime licence makes it a no brainer. Thank you!
I would have totally agreed with you until… I found @makerkit_dev last year. This is by far, the best boilerplate I found those past years. The dev is pushing new features and updates almost every week. His documentation (specially migrating to Next 15) is the best I’ve seen.
Makerkit is a gem for makers, if I was not building a desktop app I would be using it for sure, maybe for my next project
I landed on MakerKit after getting into boilerplates with ShipFast. Much better.
1000% recommend buying a good boilerplate (or making your own) I use @makerkit_dev it's so good I had an affiliate link, but I can't find it at the moment
For anyone who wants to build their own SaaS, I recommend trying out @makerkit_dev. Thanks to @gc_psk for creating such a fantastic tool that makes building websites a breeze! #SaaS #buildinpublic
We loved the product since when Giancarlo released the first version, and are building upon it ever since for all of our products. Highly recommended for all indie makers out there.
Solid and battle tested boilerplate with an amazing community and support.
Build vs buy
What a React SaaS costs to build from scratch
React renders the UI. Everything a paying customer touches behind it is infrastructure you would build before your first feature. With AI coding tools, that is still 49-81 hours of senior developer time, including fixing the patterns AI got wrong.
- Maintained full-time
- Since 2022
- Kits across 4 frameworks
- 8
- Data layers: Supabase, Drizzle, Prisma
- 3
Build onceBefore your first feature
Authentication (email, OAuth, MFA)6-10 hours
Stripe subscription billing5-8 hours
Teams, roles & invitations6-10 hours
Super admin dashboard4-6 hours
Transactional emails3-5 hours
Marketing pages2-4 hours
Blog & documentation3-5 hours
Project setup (monorepo, CI, TypeScript)2-3 hours
E2E tests (auth and billing flows)3-5 hours
Maintain foreverAfter launch, for as long as it runs
Refactoring AI-generated patterns15-25 hours
Next.js/React version upgradesEvery major release
Security patches & fixesOngoing, unpredictable
Dependency updatesOngoing
Hours with Claude Code or Cursor · bar shows the range on a 0–25h scale
Building it yourself49-81 hoursWith AI tools, including rework
Developer time saved$7,350-$12,150At $150 an hour
With MakerKitDay 1Every row above ships in the kit, and upgrades keep coming
Get lifetime access
Estimates for a senior developer building from scratch with Claude Code or Cursor at $150/hour, including 15-25 hours refactoring AI-generated patterns. Read the methodology
In short
A React SaaS boilerplate that does not pick your framework for you
Next.js, TanStack Start, React Router, or React Native: one SaaS architecture, React 19 throughout.
What is MakerKit?
MakerKit is a React SaaS boilerplate available on Next.js 16, TanStack Start, and React Router 8, all on React 19, TypeScript, Tailwind CSS 4, and Shadcn UI, plus a React Native (Expo) variant of the Next.js Supabase kit for iOS and Android. Each web kit ships authentication, subscription billing, multi-tenant teams with roles, a super admin, and a marketing site.
Tenant isolation in the data model
Teams, roles, and invitations are part of the schema. Supabase kits enforce access with Postgres RLS; Better Auth kits with organization-scoped authorization policies.
Built for AI coding agents
AGENTS.md and CLAUDE.md files at the root and in each package, rules for Claude Code, Cursor, Codex, and Gemini, and an MCP server your agent can call.
Billing beyond the happy path
Per-seat, metered, and one-off billing with webhook handling, behind a gateway that switches providers through configuration.
Lifetime license, continuous updates
Pay once, then pull new features, fixes, and framework upgrades into your repository with git. Maintained full-time since 2022.
Support from the author
Questions go to me on Discord, the person who writes and maintains the kits.
Documented per kit
Each kit has its own documentation, from installation to production. The Next.js Supabase kit alone has more than 170 pages.
Best for
- React developers choosing between Next.js, TanStack Start, and React Router
- Teams who want the same SaaS architecture whichever framework they pick
- Products that need a native mobile app on the same Supabase backend as the web app
Not for
- Client-only React apps talking to a backend you already have
- Vue, Svelte, or Angular teams
- Anyone who wants a hosted app builder instead of a codebase
With and without MakerKit
Without MakerKit: Auth, billing, and teams built from scratch with AI tools: 49-81 hours including rework
With MakerKit: Day one is a product feature, built on patterns documented for your agent
Without MakerKit: Tenancy checks written by hand in each handler, and easy to miss in one
With MakerKit: Access rules live in the data layer: RLS policies or organization-scoped policies
Without MakerKit: A template snapshot ages with the framework it was built on
With MakerKit: Framework upgrades ship to your repository, maintained since 2022
Without MakerKit: UI templates stop at the screens
With MakerKit: The backend ships too: auth, billing webhooks, admin, and E2E tests
Get the React SaaS boilerplate
One-time purchase: lifetime license, continuous updates, unlimited projects of your own.
- Lifetime access to your stack of choice
- Build unlimited applications
- Continuous updates
- Access to the Discord community
- The best support in the SaaS Starter kits market, period.
- Community and Chat support
- Community-based feature requests and Request for Comments. You have a say in what Makerkit should build next.
- One-time payment, no subscriptions
- Includes access to our free Figma UI kit
Choose your Stack
Select the technology stack that best fits your project
Questions about licensing?
Read the MakerKit license terms and the MakerKit FAQ, or contact me.
Is there a MakerKit kit for plain React with Vite?
Not a client-only one. A SaaS needs server code for auth sessions, billing webhooks, and database access, so every kit uses a full-stack React framework. If you like Vite, the TanStack Start kit builds with Vite and Nitro.
Which React framework should I choose for a SaaS?
Next.js if you want the largest ecosystem and the flagship kit. TanStack Start if you want end-to-end type-safe routing and a portable Node server. React Router 8 if you prefer loaders and actions or are migrating from Remix. Add the React Native kit when you need native mobile apps.
Do all kits have the same features?
The core is the same: authentication with MFA, subscription billing, personal and team accounts with roles and invitations, and a super admin panel. Details differ by stack, for example Supabase kits enforce tenant isolation with Postgres RLS while the Better Auth kits check permissions in the application layer.
Do I need to know React to use this?
Yes. You should be comfortable with components, hooks, and TypeScript, plus the basics of your chosen framework. The kits handle auth, billing, and multi-tenancy, but your product features are React code you or your AI agent write.
Does it work with Claude Code, Cursor, or Codex?
Yes. Each kit ships AGENTS.md and CLAUDE.md rules so agents follow the kit's conventions, and an MCP server that lets agents inspect your database schema, run migrations, and manage environment variables.
What about Vue, Svelte, or Angular?
MakerKit only ships React kits. If your team works in another framework, this is not the right fit.
Can I use it for multiple projects?
Yes. Licenses include unlimited projects. A Pro license is for one developer; the Teams license lets up to five collaborators access the code.
Can I get a refund?
Generally no, once access to the code is redeemed, because source code cannot be returned. Read the docs and the free Lite kit first if you want to evaluate the architecture.
Pick your React framework. The SaaS layer is done.
Next.js, TanStack Start, React Router, or Expo: whichever you choose, auth, billing, and teams ship ready and stay maintained. Get lifetime access and build the part that is yours.
Browse the React SaaS boilerplate docsClaude CodeCursorGeminiAsk your agent