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:

Version	Dev startup	vs v2
MakerKit v2 (Next.js 15 + webpack)	1,083ms	baseline
MakerKit v3 (Next.js 16 + Turbopack)	603ms	44% 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:

Stack	Database	ORM	Auth
next-supabase	Supabase (Postgres)	Supabase client	Supabase Auth
next-drizzle (new)	Any Postgres/MySQL/SQLite	Drizzle ORM	Clerk or Better Auth
next-prisma (new)	Any Postgres/MySQL/SQLite	Prisma 6	Clerk 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:

Scenario	Recommendation
Small project, active development	Migrate — 1-2 days, big DX gains
Large project, stable production	Wait for MakerKit migration guide to mature
Want the Drizzle/Prisma stacks	Migrate — this is the main reason to upgrade
Happy with Supabase + v2	No 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

---

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.