Feature Installers

Feature installers extend a generated project without requiring a separate template for every stack combination.

An installer can:

• Copy source or configuration files
• Merge dependencies into package.json
• Add or update npm scripts
• Insert imports into src/app/layout
• Wrap the root layout children with a provider

Run installers during interactive setup or later from the root of an existing project.

npx create-next-mui@latest add <feature>

After installing a feature, run npm install.

Supported Features

Interactive project creation shows React Query and Zustand as optional features. Linting is selected separately through the linter prompt.

Oxlint + Oxfmt

Oxlint with Oxfmt is the default linting and formatting setup for new projects and for --yes scaffolds.

Install it in an existing project:

npx create-next-mui@latest add oxlint

It adds:

• oxlint
• oxfmt
• .oxlintignore
• .oxlintrc.json
• .oxfmtrc.json
• npm run lint
• npm run lint:fix
• npm run fmt
• npm run fmt:check

ESLint

Choose ESLint during interactive setup when you prefer the traditional ESLint workflow.

Install it in an existing project:

npx create-next-mui@latest add eslint

It adds:

• eslint
• eslint-config-next
• eslint-plugin-perfectionist
• eslint-plugin-unused-imports
• eslint.config.mjs
• npm run lint
• npm run lint:fix

React Query

The React Query installer configures TanStack Query for application-wide server state.

Install it:

npx create-next-mui@latest add react-query

It adds:

• @tanstack/react-query
• @tanstack/react-query-devtools
• src/lib/tanstack-provider.tsx or src/lib/tanstack-provider.jsx
• A TanStackProvider import in the root layout
• A provider wrapper around {children}

Generated TypeScript provider:

"use client";

import { useState } from "react";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export function TanStackProvider({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 60 * 1000,
          },
        },
      }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

Zustand

The Zustand installer adds a starter store that you can replace or expand as your app grows.

Install it:

npx create-next-mui@latest add zustand

It adds:

• zustand
• src/stores/counter-store.tsx or src/stores/counter-store.jsx

Generated TypeScript store:

import { create } from "zustand";

interface CounterStore {
  count: number;
  increment(): void;
  decrement(): void;
  reset(): void;
}

export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Existing Projects

The add command expects to run inside a project directory with package.json.

For TypeScript projects, the CLI checks for tsconfig.json and installs .tsx files. If no tsconfig.json is found, it installs the JavaScript variant.