Plugins

Official plugins let you extend a generated project without manually configuring common libraries.

Plugins can be installed in two ways:

• During the interactive project setup.
• At any time after project creation using the CLI.

This approach keeps the base template lightweight while allowing you to add features only when you need them.

Supported Plugins

More official plugins will be added in future releases.

Install a Plugin

Use the add command to install an official plugin into an existing project.

npx create-next-mui@latest add <plugin-name>

Examples

Install Zustand.

npx create-next-mui@latest add zustand

Install TanStack Query.

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

Zustand

The Zustand plugin configures a ready-to-use state management setup.

What gets added?

• Zustand dependency
• Example counter store
• Recommended project structure

Example 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 }),
}));

The generated store serves as a starting point and can be modified to suit your application's needs.

TanStack Query

The React Query plugin installs and configures TanStack Query with sensible defaults for Next.js applications.

What gets added?

• TanStack Query dependencies
• Query Client configuration
• Provider component
• React Query Devtools
• Layout integration

Generated provider:

"use client";

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

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>
  );
}

The plugin also updates your root layout by wrapping your application with the generated provider.

<ThemeProvider>
  <TanStackProvider>{children}</TanStackProvider>
</ThemeProvider>

This ensures TanStack Query is available throughout your application without requiring any additional configuration.

Why Plugins?

Instead of maintaining multiple project templates, create-next-mui uses an official plugin system.

This provides several advantages:

• Install only what you need.
• Keep generated projects lightweight.
• Follow the recommended setup for each library.
• Add new features to existing projects without recreating them.

As the project evolves, additional official plugins will continue to expand the capabilities of the CLI.