DEV Community

Cover image for Just shipped: npx create-next-mui
Vikash Kumar
Vikash Kumar

Posted on • Edited on

Just shipped: npx create-next-mui

#nextjs #mui #webdev #productivity

Why I built this

Every time I start a new project, I love to go with nextjs + mui combo.
But it is frustating to build the theme system each time from scratch ( Of course I want a granular control over theme tokens )

One thing is very common that is the theme system architecture for mui setup.

Just think about a scenario spinning up a cli that do the exact work you want to do.

Features at a glance

  • MUI Integration: Pre-configured theme folder parallel to the app directory.
  • Clean Code by Default: Integrated eslint-plugin-perfectionist for auto-sorting imports/exports.
  • Next.js Optimized: Built specifically for the latest Next.js patterns.

See it in action

GitHub logo thatonevikash / create-next-mui

🚀 The fastest way to start with Nextjs + MUI

CREATE-NEXT-MUI-BANNER

create-next-mui

npm version Next.js MUI

Scaffold a production-ready Next.js + Material UI application in seconds.

The generated project comes preconfigured with:

  • ⚡ Next.js App Router
  • 🎨 Material UI
  • 📦 TypeScript or JavaScript templates
  • 🧹 ESLint Flat Config
  • 📁 Scalable project structure

No global installation required.

Quick Start

Create a new project:

npx create-next-mui my-app
Enter fullscreen mode Exit fullscreen mode

or

npm init next-mui
Enter fullscreen mode Exit fullscreen mode

If no project name is provided, the CLI will guide you through the setup interactively.

npx create-next-mui
Enter fullscreen mode Exit fullscreen mode

Non-interactive Mode

Use the --yes (or -y) flag to skip prompts and accept the default configuration.

npx create-next-mui my-app --yes
Enter fullscreen mode Exit fullscreen mode

This will automatically:

  • use the provided project name
  • select the TypeScript template
  • generate the project without prompting

This is especially useful for:

  • CI/CD pipelines
  • automation scripts
  • testing
  • quick project generation

Interactive Setup

Without --yes, the CLI walks you through the available options.

Current prompts include:

  • Project name
  • Language selection
    • TypeScript (recommended)
    • JavaScript
  • Features
    • Zustand
    • React Query (…
View on GitHub

How to use it

To get started, run the following command in your terminal:

npx create-next-mui@latest

# or

npm init next-mui
Enter fullscreen mode Exit fullscreen mode

A closer look at the "Perfectionist" setup

I prefer organized import and export statements, when you are building something that can scale over time, it is better to architect it beautifully!

Keep building

Top comments (0)