Skip to main content
StarterPick

MakerKit v3 Upgrade Guide 2026

·StarterPick Team
makerkitnextjsreacttailwindsaas-boilerplateupgrade
Share:

MakerKit v3 Upgrade Guide 2026

TL;DR

MakerKit v3 is a substantial upgrade — not just a dependency bump. It ships with Next.js 16 (Turbopack stable), React 19 (React Compiler stable), Tailwind CSS 4 (Rust engine), two new database stacks (Drizzle and Prisma alongside the existing Supabase), a revamped CLI with codemods, and an MCP server for AI-assisted development. If you're on MakerKit v2, this is a worthwhile migration: development startup time drops from 1,083ms to 603ms, and the new Drizzle stack is significantly more flexible than the Supabase-only v2 setup.

Key Takeaways

  • Next.js 16 default — Turbopack is stable and the default build system; 87% faster dev startup
  • React 19 + React Compiler — automatic memoization, no more useMemo/useCallback manual optimization
  • Tailwind CSS 4 — Rust engine, CSS-first config, up to 5x faster builds
  • Two new DB stacks — Next.js + Drizzle and Next.js + Prisma join the existing Supabase stack
  • MCP server — AI assistants can read your MakerKit project configuration and generate context-aware code
  • v2 → v3 migration requires — config format changes, Tailwind v4 config migration, and package updates
  • Policies API — new B2B feature to control who can create team accounts

What's New in MakerKit v3

Next.js 16 + Turbopack Stable

The biggest developer experience change in v3 is Turbopack graduating from experimental to stable and becoming the default bundler. MakerKit measured their own kit startup with this change:

VersionDev startupvs v2
MakerKit v2 (Next.js 15 + webpack)1,083msbaseline
MakerKit v3 (Next.js 16 + Turbopack)603ms44% faster

For a large SaaS codebase with dozens of routes and components, the cumulative time savings compound significantly over a development session.

Next.js 16 also ships 25-60% faster HTML rendering (Partial Prerendering improvements) and 200+ Turbopack bug fixes from the 16.1 → 16.2 cycle.

React 19 + React Compiler

React 19's React Compiler is now stable and included by default in MakerKit v3. The compiler automatically inserts useMemo, useCallback, and React.memo optimizations at build time — you write clean, unoptimized code and the compiler handles performance.

// MakerKit v3: write this
function UserProfile({ user, onEdit }: { user: User; onEdit: () => void }) {
  const displayName = user.firstName + " " + user.lastName;

  return (
    <div>
      <span>{displayName}</span>
      <button onClick={onEdit}>Edit</button>
    </div>
  );
}

// React Compiler generates the equivalent of:
const UserProfile = React.memo(function UserProfile({ user, onEdit }) {
  const displayName = useMemo(
    () => user.firstName + " " + user.lastName,
    [user.firstName, user.lastName]
  );
  const stableOnEdit = useCallback(onEdit, [onEdit]);
  return <div><span>{displayName}</span><button onClick={stableOnEdit}>Edit</button></div>;
});

No manual optimization needed. MakerKit confirmed full React Compiler compatibility in v3.

Tailwind CSS 4

Tailwind CSS 4 replaces the JavaScript build system with a Rust-powered engine and moves configuration from tailwind.config.js to native CSS @theme declarations. For MakerKit users, this requires a one-time migration step.

/* MakerKit v3: tailwind.config.css (replaces tailwind.config.js) */
@import "tailwindcss";

@theme {
  --color-primary: oklch(62% 0.19 259);
  --color-secondary: oklch(55% 0.15 280);
  --font-sans: "Inter", ui-sans-serif, system-ui;
  --radius-lg: 0.75rem;
}

The official MakerKit docs include a migration guide at makerkit.dev/docs/next-supabase-turbo/installation/update-tailwindcss-v4 with a step-by-step walkthrough.

New Database Stacks: Drizzle and Prisma

MakerKit v2 was built around Supabase. v3 ships three database stack options:

StackDatabaseORMAuth
next-supabaseSupabase (Postgres)Supabase clientSupabase Auth
next-drizzle (new)Any Postgres/MySQL/SQLiteDrizzle ORMClerk or Better Auth
next-prisma (new)Any Postgres/MySQL/SQLitePrisma 6Clerk or Better Auth

The Drizzle and Prisma stacks give you full control over your database and authentication provider. If you want to self-host your Postgres on Railway, Neon, or PlanetScale, you're no longer tied to Supabase.

The Programmable CLI and Codemods

MakerKit v3 ships a new CLI that uses Shadcn-style codemods to add features without copy-paste:

# Install MakerKit v3
npx @makerkit/cli@latest create my-saas

# Choose your stack:
# > next-supabase (Supabase + Supabase Auth)
# > next-drizzle (Any DB + Clerk/Better Auth)
# > next-prisma (Any DB + Clerk/Better Auth)

# Add features after creation:
npx @makerkit/cli add billing-stripe
npx @makerkit/cli add team-invitations
npx @makerkit/cli add admin-dashboard

Each add command is a codemod that inserts the feature into your existing codebase — not overwriting your customizations.

MCP Server

MakerKit v3 ships an MCP (Model Context Protocol) server that gives AI assistants like Claude Code access to your project's configuration, schema, and available features:

// Add to your Claude Code MCP config:
{
  "mcpServers": {
    "makerkit": {
      "command": "npx",
      "args": ["@makerkit/mcp-server"],
      "cwd": "/path/to/your-saas"
    }
  }
}

With the MCP server running, you can ask Claude Code: "Add a team invitation feature" — and it will read your existing MakerKit config, understand which stack you're on, and generate accurate, context-aware code.

Policies API (B2B Feature)

MakerKit v3 adds a Policies API for team account management, enabling B2B-specific rules around team creation:

// makerkit.config.ts
import { defineMakerKitConfig } from "@makerkit/core";

export default defineMakerKitConfig({
  teams: {
    policies: {
      // Allow team creation only for users on Pro+ plans
      canCreateTeam: async (user) => {
        const subscription = await getUserSubscription(user.id);
        return subscription.plan !== "free";
      },

      // Enforce team size limits by plan
      canInviteMember: async (team, inviter) => {
        const members = await getTeamMemberCount(team.id);
        const limit = getTeamMemberLimit(inviter.subscription.plan);
        return members < limit;
      },
    },
  },
});

This is essential for B2B SaaS where different pricing tiers have different team capabilities.

Migration Guide: v2 → v3

Step 1: Update Dependencies

# Update MakerKit core packages
npm install @makerkit/core@3 @makerkit/ui@3 @makerkit/auth@3

# Update framework dependencies
npm install next@16 react@19 react-dom@19 tailwindcss@4

# Update TypeScript (MakerKit v3 requires TypeScript 6)
npm install typescript@6 -D

Step 2: Migrate Tailwind Configuration

MakerKit provides an automated migration script:

npx @makerkit/cli migrate tailwind-v4

# Or manually:
# 1. Rename tailwind.config.js → tailwind.config.css
# 2. Move color/font/spacing tokens to CSS @theme
# 3. Update imports in your root CSS file

Before:

// tailwind.config.js (v2)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "hsl(var(--primary))",
      },
    },
  },
};

After:

/* tailwind.config.css (v3) */
@import "tailwindcss";

@theme {
  --color-primary: oklch(62% 0.19 259);
}

Step 3: Update MakerKit Configuration

MakerKit v3 uses a new typed config format:

// makerkit.config.ts (v3 format)
import { defineMakerKitConfig } from "@makerkit/core";

export default defineMakerKitConfig({
  app: {
    name: "My SaaS",
    url: process.env.NEXT_PUBLIC_APP_URL!,
    locale: "en",
  },
  auth: {
    providers: ["email", "google", "github"],
    redirectAfterSignIn: "/dashboard",
  },
  billing: {
    provider: "stripe",
    products: [
      {
        id: "pro",
        name: "Pro",
        prices: [
          { id: "pro-monthly", interval: "month", amount: 29 },
          { id: "pro-annual", interval: "year", amount: 290 },
        ],
      },
    ],
  },
});

Step 4: TypeScript 6 Breaking Changes

MakerKit v3 requires TypeScript 6. Common migration issues:

// tsconfig.json — remove deprecated settings:
{
  "compilerOptions": {
    // Remove:
    // "target": "ES5"          → use "ES2022" instead
    // "moduleResolution": "classic" → use "bundler"
    // "downlevelIteration": true   → remove entirely

    // Add:
    "target": "ES2022",
    "moduleResolution": "bundler",
    "module": "ESNext"
  }
}

Step 5: React Compiler Compatibility

The React Compiler is enabled by default in v3. If you have components that assume imperative mutation patterns:

// This pattern breaks with React Compiler:
function BadComponent({ items }) {
  const list = [];
  items.forEach(item => list.push(item.name)); // mutable push
  return <ul>{list.map(name => <li>{name}</li>)}</ul>;
}

// Fix: use functional patterns
function GoodComponent({ items }) {
  const names = items.map(item => item.name); // creates new array
  return <ul>{names.map(name => <li>{name}</li>)}</ul>;
}

To disable the React Compiler temporarily while migrating:

// next.config.js
module.exports = {
  experimental: {
    reactCompiler: false,
  },
};

Is v3 Worth Migrating to?

Yes, for new projects — always start with v3. The new stacks, React Compiler, and CLI make it significantly better than v2 for starting fresh.

For existing v2 projects — depends on your situation:

ScenarioRecommendation
Small project, active developmentMigrate — 1-2 days, big DX gains
Large project, stable productionWait for MakerKit migration guide to mature
Want the Drizzle/Prisma stacksMigrate — this is the main reason to upgrade
Happy with Supabase + v2No urgency — v2 still works

Recommendations

Start with MakerKit v3 if:

  • Building a new SaaS in 2026
  • You want self-hostable database options beyond Supabase
  • AI-assisted development matters (MCP server)
  • You want Next.js 16 + Turbopack from day one

Competitors to evaluate:

  • Supastarter v3 — similar Next.js + Supabase offering with Nuxt option
  • ShipFast — lighter boilerplate, lower price, less opinionated
  • Create T3 Turbo — free, tRPC + Drizzle, but more DIY

See MakerKit vs Supastarter 2026 for a direct comparison.

Methodology

  • Sources: makerkit.dev/changelog, makerkit.dev/blog/tutorials/nextjs-16, makerkit.dev/docs/next-supabase-turbo/installation/update-tailwindcss-v4, nextjs.org/docs/app/guides/upgrading/version-16, React Compiler documentation, Tailwind CSS 4 upgrade guide
  • Data as of: March 2026

What MakerKit v3 Gets Right That v2 Didn't

Two years of user feedback shaped the v3 architecture decisions. The shift from a single Supabase stack to a multi-database, multi-auth, multi-billing plugin model addresses the most common complaint about v2: lock-in to Supabase.

In v2, switching from Supabase Auth to Clerk required touching dozens of files. In v3, auth is a configurable adapter — swapping providers updates a few configuration files and the provider-specific environment variables, without modifying application code. The same separation applies to billing (Stripe, Lemon Squeezy, or Paddle) and database (Supabase, Neon/Drizzle, Neon/Prisma, PlanetScale).

This architectural choice has a practical implication: if a provider changes pricing significantly — as several auth and database providers have done over the past two years — migrating in v3 is a bounded project rather than an open-ended refactoring task.

The CLI tooling change is subtler but equally valuable. v2 onboarding required manually editing configuration files, an error-prone process that created variation between projects. v3's interactive CLI enforces consistency: the CLI configures your chosen stack, generates the necessary environment variable stubs, and runs the initial migrations. Two developers setting up v3 with different stack choices will still have equivalent project structures.

Evaluating MakerKit v3 Against Competitors in 2026

MakerKit v3 competes primarily in the $250-$500 boilerplate tier. The relevant comparisons are Supastarter (similar price, similar feature surface) and ShipFast (lower price, simpler codebase).

Against Supastarter v3: both have monorepo structures, multi-billing support, and Next.js + app router. MakerKit v3's differentiators are the multi-database support beyond Supabase and the MCP server for AI-assisted development. Supastarter's differentiators are a polished UI and a slightly lower barrier to customization. Teams already invested in Supabase should evaluate both; teams wanting database flexibility should lean toward MakerKit v3.

Against ShipFast: MakerKit is significantly more complex but also significantly more complete. ShipFast's codebase is designed to be understood in an afternoon; MakerKit's is designed to support a multi-year B2B product. The price difference is not the deciding factor — the complexity and feature surface are. Solo founders validating an idea often start with ShipFast; teams building a long-horizon B2B SaaS often choose MakerKit. One useful signal: if your product needs multi-tenant organizations with custom roles, per-organization billing, and an admin panel from day one, MakerKit v3 delivers all of that pre-built. If you're validating whether users will pay for the product at all, start simpler and reach for MakerKit's complexity when you have customers who need it.

For teams making this decision, the MakerKit review 2026 covers the specific package architecture and plugin system in detail. The ShipFast review 2026 provides the counterpoint for teams evaluating the simpler alternative. And best SaaS boilerplates 2026 places both in the context of the full market, including free and open-source alternatives.

The boilerplate and tool choices covered here represent the most actively maintained options in their category as of 2026. Evaluate each against your specific requirements: team expertise, deployment infrastructure, budget, and the features your product requires on day one versus those you can add incrementally. The best starting point is the one that lets your team ship the first version of your product fastest, with the least architectural debt.

Comparing SaaS boilerplates? See MakerKit vs Supastarter 2026 and ShipFast vs MakerKit 2026.

Not on MakerKit? See Best Next.js SaaS Boilerplates 2026 for the full roundup.

Review MakerKit and compare alternatives on StarterPick.

The SaaS Boilerplate Matrix (Free PDF)

20+ SaaS starters compared: pricing, tech stack, auth, payments, and what you actually ship with. Updated monthly. Used by 150+ founders.

Join 150+ SaaS founders. Unsubscribe in one click.