DEV Community: Vikash Kumar

npx create-next-mui

Vikash Kumar — Mon, 01 Jun 2026 10:38:02 +0000

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

thatonevikash / create-next-mui

A blazing-fast interactive CLI to generate production-ready Next.js applications seamlessly integrated with Material UI

create-next-mui 🚀

A blazing-fast, interactive CLI tool to instantly scaffold production-ready Next.js applications pre-configured with Material UI (MUI), robust theme providers, and an elite architectural linting layout.

Stop wasting time wiring up Emotion caches, Next.js App Router layout configs, or sorting your imports manually. Launch your next project perfectly in under 10 seconds.

🚀 Quick Start

You don't need to install anything globally. Just run the following command in your terminal:

npx create-next-mui

# or 

npm init next-mui

The interactive prompt engine (powered by @clack/prompts) will guide you through naming your project and selecting your preferred flavor.

✨ Key Features

⚡ Modern Architecture: Built natively on top of the Next.js App Router structure.
🎨 Material UI Ready: Seamless compilation of MUI components inside Server and Client Components with pre-configured UI themes.
🧩 Dual-Template Architecture: Full support for both TypeScript and JavaScript boilerplates.
🧼 Perfectionist Linting Config: Pre-packaged with…

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

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

Tired of Codebases with Mismatched File Casing? 🛠️ Meet CaselyJS (v1.0.4)

Vikash Kumar — Sat, 04 Apr 2026 11:36:31 +0000

Every developer has been there. You join a new project, or you're cleaning up a legacy codebase, and you see it:

UserService.ts
product_api.js
get-orders.ts
Final_component.jsx

It’s a visual mess, and it makes finding files in your editor a constant friction point. Manually renaming dozens or hundreds of files is a tedious, error-prone nightmare.

I built CaselyJS to solve this problem permanently, and I just upgraded it to v1.0 with a full TypeScript rewrite and a brand-new CLI.

⚡ The 10-Second Quick Start (No Install Required)

The best way to try CaselyJS is with npx. You can clean up your current project right now without adding a single dependency to your package.json.

# Preview changes (dry run) in the current directory
npx caselyjs --dry

# Re-case all files in the ./src folder to kebab-case
npx caselyjs ./src --case kebab

✨ What’s New in v1.0?

I’ve transformed CaselyJS from a simple string utility into a robust, high-performance CLI tool designed for large-scale codebase refactoring.

Features

Full CLI: No code required. Run it directly from the terminal.
Refactor codebases in seconds.
Dry Run Mode: See exactly which files will be renamed before it happens.
Total peace of mind. Zero risk.
Recursive Bottom-Up: Renames deep directories first, keeping parent paths valid.
It just works, even on deeply nested structures.
File Filtering: target specific extensions (e.g., just .ts and .tsx).
Complete control over the scope of changes.

🚀 Usage Examples

npx caselyjs ./src --full --case pascal --dry

CLI Options

--case: pascal | kebab | camel ( default: kebab, shorthand: -c )

npx caselyjs ./src/components --case pascal

# or
npm caselyjs ./src/components -c pascal

--ext: ( default: "js,jsx,ts,tsx", shorthand: -e )

npx caselyjs ./src/components --ext "go,py,cpp"

# or
npm caselyjs ./src/components -e "go,py,cpp"

--ext overrides the existing extensions

--full: ( default: false, shorthand: -e )

npx caselyjs ./src/components --case kebab --full

# or
npm caselyjs ./src/components -c kebab -f

--dry: ( default: false )

npx caselyjs ./src/components --case kebab --full --dry

🧠 Under the Hood (For the Geeks)

This v1.0 rewrite was about more than just a CLI. I moved the entire core to TypeScript for strict type safety. We use Commander.js for robust flag parsing, Chalk for those beautiful terminal colors, and a custom Bottom-Up Sorting algorithm for recursive folder renames. This ensures that a child file's path isn't broken when its parent folder is renamed during the process.

Mit-Licensed and Open Source
CaselyJS is 100% open source and free to use.

I would love your feedback on the new CLI and features! If you run into any issues or have a feature request (more case types?), please open an issue or pull request on GitHub.

Try it out: npx caselyjs ./your-test-folder --dry

Repository: github.com/thatonevikash/caselyjs
NPM: npm/caselyjs

Made with ❤️ by thatonevikash

Rename codebase with ease - "caselyjs"

Vikash Kumar — Fri, 01 Aug 2025 07:40:02 +0000

Know the uses!

Renaming or changing files/folders is very common thing most of devs do it more often.

Cause

You've a project with 50+ files and folders. You're using camelCase for naming files and folders so far.

Then you realized I should use another case eg.- PascalCase, kebab-case.

In such case, you'll rename them manually.
Good but not Efficient.

Lets increase the numbers of file or folders to 500+

Caselyjs

Built to eliminate manual task.

Suppose, You've a project built on react using vite.

and the folder structure looks like

To organize entire codebase, You've decided to choose one naming case for the entire codebase, that is kebab-case.

To achieve this all you need caselyjs

npm i caselyjs

Create a file parallel to src directory as rename.js ( or change.js ) anything its up to you.

Configs

import { casely } from 'caselyjs';

casely.config({
   path: 'src',
   case: 'kebab',
   file: ['js', 'jsx', 'ts', 'tsx'],
   operate: 'full'
})

casely.execute()

npm/caselyjs

Thank You!