create-next-mui

The fastest way to scaffold Next.js + Material UI applications.

Skip repetitive setup and start building with a production-ready foundation in seconds.

---

---

✨ Why create-next-mui?

Starting every new Next.js + Material UI project often means repeating the same setup:

• Install Material UI & Emotion
• Configure Material UI App Router integration & Theme Provider
• Set up Linters (Oxlint / ESLint Flat Config)
• Organize scalable directory structure
• Configure state management & data fetching tools

create-next-mui automates all of that.

Generate a clean, scalable, production-ready project so you can focus on building your application—not configuring it.

---

🚀 Features

• ⚡ Next.js App Router (Next.js 16)
• 🎨 Material UI v9 (@mui/material-nextjs integration)
• 📦 TypeScript & JavaScript templates
• 🔍 Linter Choices: Fast Oxlint or ESLint Flat Config
• 🧩 Modular Feature & Plugin System
• 📁 Scalable project structure
• ⚡ Automated dependency installation option
• 💚 Zero global installation required

---

⚡ Quick Start

Create a new project:

npx create-next-mui my-app

or

npm init next-mui my-app

Then start developing:

cd my-app
npm install # (if not auto-installed)
npm run dev

---

🎯 Interactive Setup

Run the CLI without arguments or with a project name to start the interactive prompt flow:

npx create-next-mui

The CLI will guide you step-by-step:

1. Project Name: Choose your directory name (or . for the current directory)
2. Language:
   • TypeScript (Recommended)
   • JavaScript
3. Linter:
   • Oxlint (Recommended - fast lint checks)
   • ESLint (Flat Config with perfectionist & unused-imports rules)
   • None (Skip linter configuration)
4. Optional Features:
   • React Query (TanStack Query setup and provider)
   • Zustand (Global state management store example)
5. Auto Install: Choose whether to install packages immediately
6. Summary Confirmation: Review choices before scaffolding

---

⚡ Non-Interactive Mode

Ideal for automation, scripts, and CI/CD pipelines.

npx create-next-mui my-app --yes

or

npx create-next-mui my-app -y

Flag options:

• --yes / -y: Skips prompts, defaults to TypeScript, Oxlint, and skips auto installation.
• --js: When combined with -y, defaults to JavaScript template.

npx create-next-mui my-app -y --js

---

🧩 Feature & Plugin CLI

Add features and tools directly to an existing Next.js + MUI project created with create-next-mui:

React Query (TanStack Query)

npx create-next-mui add react-query

Zustand

npx create-next-mui add zustand

Oxlint + Oxfmt

npx create-next-mui add oxlint

ESLint

npx create-next-mui add eslint

Plugins automatically configure dependencies, copy required source files, and inject providers into your root layout.

---

📦 Available Templates

TypeScript

Recommended for most projects.

• Full TypeScript support with strict types
• Material UI theme definitions & Next.js App Router setup
• Pre-configured tsconfig.json

---

JavaScript

Ideal for vanilla JavaScript workflows.

• Modern ECMAScript setup
• Material UI App Router configuration
• Clean folder structure

---

📁 Project Structure

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx (or .jsx)
│   │   └── page.tsx (or .jsx)
│   ├── components/
│   └── theme/
├── package.json
├── next.config.ts (or .js)
└── README.md

---

📚 What's Included?

Feature	Description
Next.js App Router	Latest App Router architecture
Material UI v9	Material UI integration with @mui/material-nextjs
Theme Configuration	Pre-configured theme and ThemeProvider
Emotion	Integrated CSS-in-JS support
Linters	Oxlint or ESLint Flat Config options
State / Data Plugins	Zustand & TanStack React Query integration support
Clean Output	Build artifacts, .next, caches, and lockfiles are omitted during scaffolding

---

🖥 CLI Reference

Command	Description
npx create-next-mui	Interactive project creation
npx create-next-mui <project-name>	Create a project with a specific name
npm init next-mui	Alternative project creation command
-y, --yes	Skip prompts and use defaults
--js	Use JavaScript template with -y
npx create-next-mui add react-query	Add React Query to current project
npx create-next-mui add zustand	Add Zustand to current project
npx create-next-mui add oxlint	Add Oxlint and Oxfmt to current project
npx create-next-mui add eslint	Add ESLint to current project

---

🤝 Contributing

Contributions are always welcome!

• Report bugs & issues
• Suggest features or improvements
• Submit pull requests

Feel free to open an issue or pull request on GitHub.

---

📖 Learn More

• 🚀 Introducing create-next-mui v0.1.0
• 🤩 create-next-mui v0.2.0 — Plugin Support
• 🌐 Website / Documentation

---

⭐ Support the Project

If create-next-mui helps you build projects faster, consider giving it a ⭐ on GitHub!

---

📄 License

This project is licensed under the MIT License.