create-next-mui 0.1.2 → 0.1.4

package/README.md

@@ -1,122 +1,217 @@
-<img width="1420" height="308" alt="CREATE-NEXT-MUI-BANNER" src="https://github.com/user-attachments/assets/11e72fc8-6b6d-40c4-97a1-c05f7b943e02" />
+<img width="1420" alt="CREATE-NEXT-MUI-BANNER" src="https://github.com/user-attachments/assets/11e72fc8-6b6d-40c4-97a1-c05f7b943e02" />
 
-# create-next-mui 🚀
+# create-next-mui
 
 [![npm version](https://img.shields.io/npm/v/create-next-mui?style=flat&logo=npm&color=CB3837)](https://www.npmjs.com/package/create-next-mui)
-[![Next.js v19](https://img.shields.io/badge/Next.js-v19-000000?style=flat&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
-[![MUI v9](https://img.shields.io/badge/MUI-v9-007FFF?style=flat&logo=mui&logoColor=white)](https://mui.com/)
+[![Next.js](https://img.shields.io/badge/Next.js-v19-000000?style=flat&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
+[![MUI](https://img.shields.io/badge/MUI-v9-007FFF?style=flat&logo=mui&logoColor=white)](https://mui.com/)
 
-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.
+Scaffold a production-ready **Next.js + Material UI** application in seconds.
 
-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.
+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
+# Quick Start
+
+Create a new project:
+
+```bash
+npx create-next-mui my-app
+```
 
-You don't need to install anything globally. Just run the following command in your terminal:
+or
 
 ```bash
-npx create-next-mui my-next-mui-app
+npm init next-mui
+```
 
-# or use prompts
+If no project name is provided, the CLI will guide you through the setup interactively.
 
+```bash
 npx create-next-mui
+```
 
-# or 
+---
 
-npm init next-mui
+# Non-interactive Mode
+
+Use the `--yes` (or `-y`) flag to skip prompts and accept the default configuration.
+
+```bash
+npx create-next-mui my-app --yes
 ```
 
-Passing a project name creates that folder and uses the same name in the generated project metadata. If you omit the name, the interactive prompt engine (powered by `@clack/prompts`) will guide you through naming your project and selecting your preferred flavor.
+This will automatically:
 
----
+- use the provided project name
+- select the **TypeScript** template
+- generate the project without prompting
 
-## ✨ Key Features
+This is especially useful for:
 
-- **⚡ 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 **ESLint v9 Flat Config** (`eslint.config.mjs`) utilizing `eslint-plugin-perfectionist` and `eslint-plugin-unused-imports`.
-- **📦 Pure & Lightweight:** Zero bloat. Template files are automatically stripped of development artifacts (`node_modules`, caches) before build deployment.
+- CI/CD pipelines
+- automation scripts
+- testing
+- quick project generation
 
 ---
 
-## 📦 Choice of Flavors
+# Interactive Setup
+
+Without `--yes`, the CLI walks you through the available options.
 
-During the prompt sequence, you can choose between two completely separate architectures, both fine-tuned for high-performance builds:
+Current prompts include:
 
-1. **TypeScript Template (`next-mui-template-ts`)** – Out-of-the-box strong typing, custom theme module augmentations, and strict `@typescript-eslint` checking.
-2. **JavaScript Template (`next-mui-template-js`)** – Lightweight, clean vanilla ES modern syntax with optimized configuration overhead.
+- Project name
+- Language selection
+  - TypeScript (recommended)
+  - JavaScript
+- Features
+  - Zustand
+  - React Query ( TanStack Query )
 
 ---
 
-## 📐 Generated Project Structure
+# Available Templates
+
+## TypeScript
+
+Recommended for most projects.
+
+Includes:
+
+- TypeScript
+- strict type checking
+- MUI theme typings
+- ESLint Flat Config
+
+## JavaScript
+
+For developers who prefer JavaScript.
 
-No matter which path you choose, `create-next-mui` prints out an organized, production-grade layout optimized for scalability:
+Includes:
+
+- modern JavaScript
+- Material UI
+- ESLint Flat Config
+
+## Features
+
+- Zustand
+- React Query ( TanStack Query )
+
+---
+
+# Generated Project Structure
 
 ```text
-my-awesome-app/
+my-app/
 ├── src/
 │   ├── app/
-│   │   ├── layout.js/ts      # Handles App Router initialization & MUI Cache Provider
-│   │   └── page.js/ts        # Pre-built home view utilizing responsive MUI layouts
-│   ├── components/           # Reusable global presentation components
+│   ├── components/
 │   └── theme/
-│       ├── index.js/ts       # Deep theme customization (palette, typography, overrides)
-│       └── theme-provider.js # Keeps layout tree hydrations isolated and performant
-├── eslint.config.mjs         # Elite natural line-length linting layout
-├── next.config.js            # Configured optimization vectors
+├── eslint.config.mjs
+├── next.config.js
 ├── package.json
 └── README.md
-
 ```
 
 ---
 
-## 🎨 Elite Linting Layout (Perfectionist Grouping)
+# What's Included
 
-Both boilerplate environments contain a fine-tuned, strict importing arrangement rule framework using `line-length` natural alpha sorting. Your files are automatically linted and organized cleanly on save down this architectural chain:
+Every generated project comes configured with:
 
-1. **React Core APIs** (`react`)
-2. **Next.js Framework Hooks & Context** (`next/*`)
-3. **Material UI Design Tokens & Engine** (`@mui/*`, `@emotion/*`)
-4. **External Third-Party Libraries**
-5. **Internal Layer Architectures** (`@/types`, `@/lib`, `@/components`, `@/theme`)
+- Next.js App Router
+- Material UI
+- Theme Provider
+- Emotion integration
+- ESLint v9 Flat Config
+- eslint-plugin-perfectionist
+- eslint-plugin-unused-imports
+- organized project structure
 
-Say goodbye to disorganized, messy blocks of import statements!
+Development artifacts such as `node_modules`, `.next`, and build caches are excluded from generated projects.
 
 ---
 
-## ⚙️ Development Scripts
+# Getting Started
 
-Once your scaffolding finishes generating, step inside your directory and run the standard lifecycle workflows:
+After scaffolding:
 
 ```bash
-# Install dependencies
+cd my-app
 npm install
+npm run dev
+```
 
-# Boot up local development server
+Useful scripts:
+
+```bash
 npm run dev
+```
+
+Start the development server.
 
-# Run ESLint validation checks with automated file ordering adjustment
+```bash
 npm run lint
+```
 
-# Compile production-ready code bundles
+Run ESLint.
+
+```bash
 npm run build
+```
+
+Create a production build.
+
+---
+
+# CLI Reference
 
+## Create a project
+
+```bash
+npx create-next-mui my-app
+```
+
+## Interactive mode
+
+```bash
+npx create-next-mui
+```
+
+## Accept defaults
+
+```bash
+npx create-next-mui my-app --yes
+```
+
+or
+
+```bash
+npx create-next-mui my-app -y
 ```
 
 ---
 
-## 🤝 Contributing & Feedback
+# Contributing
 
-Issues and pull requests are highly welcome! If you want to expand the templates or suggest additional components, feel free to open an issue or submit a pull request on the official repository.
+Issues and pull requests are welcome.
 
-Maintained with 💻 by [thatonevikash](https://github.com/thatonevikash).
+If you'd like to improve the templates or add new features, feel free to open an issue or submit a PR.
 
 ---
 
-## 📜 License
+# License
 
-This project is licensed under the MIT License - see the LICENSE file for details.
+MIT

package/{next-mui-template-ts → next-mui-templates/base-js}/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "next-mui-template",
+  "name": "create-next-mui",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "next-mui-template",
+      "name": "create-next-mui",
       "version": "0.0.1",
       "dependencies": {
         "@emotion/react": "^11.14.0",
@@ -276,9 +276,9 @@
       }
     },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
-      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -2312,6 +2312,40 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz",

package/{next-mui-template-js → next-mui-templates/base-js}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "next-mui-template",
+  "name": "create-next-mui",
   "version": "0.0.1",
   "private": true,
   "scripts": {

package/{next-mui-template-js → next-mui-templates/base-ts}/package-lock.json

@@ -276,9 +276,9 @@
       }
     },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
-      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -2312,6 +2312,40 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz",

package/{next-mui-template-ts → next-mui-templates/base-ts}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "next-mui-template",
+  "name": "create-next-mui",
   "version": "0.0.1",
   "private": true,
   "scripts": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-mui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "spin up your nextjs project with mui setup",
   "keywords": [
     "nextjs",
@@ -23,8 +23,7 @@
   },
   "files": [
     "src",
-    "next-mui-template-ts",
-    "next-mui-template-js"
+    "next-mui-templates"
   ],
   "main": "index.js",
   "scripts": {
@@ -32,7 +31,6 @@
   },
   "dependencies": {
     "@clack/prompts": "^1.5.0",
-    "degit": "^3.3.2",
     "picocolors": "^1.1.1"
   }
 }

package/src/index.js

@@ -6,11 +6,15 @@ import fs from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
-// Resolve the directory where this CLI package actually lives on the user's system
+// ----------------------------------------------------------------------
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const args = process.argv.slice(2);
+const command = args[0];
+const featureName = args[1];
+
 const positionalArgs = args.filter(
   (arg) => !["--yes", "-y", "--js"].includes(arg),
 );
@@ -23,6 +27,38 @@ const hasJsFlag = args.includes("--js");
 
 const DEFAULT_LANGUAGE = hasJsFlag ? "js" : "ts";
 
+// ----------------------------------------------------------------------
+
+const LANG = [
+  {
+    value: "ts",
+    label: "TypeScript (Recommended)",
+    hint: "Strict typings, clean architecture",
+  },
+  {
+    value: "js",
+    label: "JavaScript",
+    hint: "Vanilla JS configuration",
+  },
+];
+
+const FEATURES = [
+  {
+    value: "react-query",
+    label: "React Query",
+    hint: "TanStack Query configuration",
+  },
+  {
+    value: "zustand",
+    label: "Zustand",
+    hint: "Lightweight global state management",
+  },
+];
+
+// ----------------------------------------------------------------------
+// Helper Functions
+// ----------------------------------------------------------------------
+
 function validateProjectName(value) {
   if (value.length === 0) return "Project name is required!";
 
@@ -39,36 +75,192 @@ function getPackageName(projectName, targetProjectDir) {
 }
 
 async function updateProjectName(targetProjectDir, packageName) {
-  const files = ["package.json", "package-lock.json"];
+  const filePath = path.join(targetProjectDir, "package.json");
+  try {
+    const content = await fs.readFile(filePath, "utf8");
+    const json = JSON.parse(content);
+    json.name = packageName;
 
-  await Promise.all(
-    files.map(async (file) => {
-      const filePath = path.join(targetProjectDir, file);
+    if (json.packages?.[""]?.name) {
+      json.packages[""].name = packageName;
+    }
+    await fs.writeFile(filePath, `${JSON.stringify(json, null, 2)}\n`);
+  } catch (error) {
+    if (error.code === "ENOENT") return;
+    throw error;
+  }
+}
+
+async function mergePackageJson(targetProjectDir, manifest) {
+  const filePath = path.join(targetProjectDir, "package.json");
+  try {
+    const content = await fs.readFile(filePath, "utf8");
+    const json = JSON.parse(content);
 
-      try {
-        const content = await fs.readFile(filePath, "utf8");
-        const json = JSON.parse(content);
+    json.dependencies = {
+      ...json.dependencies,
+      ...(manifest.dependencies || {}),
+    };
 
-        json.name = packageName;
+    json.devDependencies = {
+      ...json.devDependencies,
+      ...(manifest.devDependencies || {}),
+    };
 
-        if (json.packages?.[""]?.name) {
-          json.packages[""].name = packageName;
-        }
+    await fs.writeFile(filePath, `${JSON.stringify(json, null, 2)}\n`);
+  } catch (error) {
+    if (error.code === "ENOENT") return;
+    throw error;
+  }
+}
+
+async function injectProviderToLayout(targetProjectDir, manifest, language) {
+  const ext = language === "ts" ? "tsx" : "jsx";
+  const layoutPath = path.join(targetProjectDir, "src", "app", `layout.${ext}`);
+
+  try {
+    let content = await fs.readFile(layoutPath, "utf8");
 
-        await fs.writeFile(filePath, `${JSON.stringify(json, null, 2)}\n`);
-      } catch (error) {
-        if (error.code === "ENOENT") return;
+    // 1. Inject the Import Line safely below the last import
+    if (manifest.importLine && !content.includes(manifest.importLine)) {
+      const lines = content.split("\n");
+      const lastImportIndex = lines.findLastIndex((line) =>
+        line.trim().startsWith("import"),
+      );
 
-        throw error;
+      if (lastImportIndex !== -1) {
+        lines.splice(lastImportIndex + 1, 0, manifest.importLine);
+        content = lines.join("\n");
+      } else {
+        content = `${manifest.importLine}\n${content}`;
       }
-    }),
+    }
+
+    // 2. Wrap {children} dynamically
+    if (manifest.expression) {
+      const openTag = manifest.expression.open;
+      const closeTag = manifest.expression.close;
+
+      if (!content.includes(openTag)) {
+        content = content.replace(
+          /(\>\s*)\{\s*children\s*\}(\s*\<)/,
+          `$1${openTag} {children} ${closeTag}$2`,
+        );
+      }
+    }
+
+    await fs.writeFile(layoutPath, content, "utf8");
+  } catch (error) {
+    if (error.code === "ENOENT") return;
+    throw error;
+  }
+}
+
+async function applyFeature(feature, targetProjectDir, language) {
+  const featureDir = path.resolve(
+    __dirname,
+    "..",
+    "next-mui-features",
+    feature,
   );
+  const manifestPath = path.join(featureDir, "manifest.json");
+  const ext = language == "ts" ? "tsx" : "jsx";
+
+  let manifest = {};
+  try {
+    const manifestContent = await fs.readFile(manifestPath, "utf8");
+    manifest = JSON.parse(manifestContent);
+  } catch {
+    // Fail-safe if manifest is missing or malformed
+    return;
+  }
+
+  // 1. Copy feature-specific files from the language subdirectory
+  if (manifest.files) {
+    for (const file of manifest.files) {
+      const srcPath = path.resolve(featureDir, language, `${file.src}.${ext}`);
+      const destPath = path.resolve(targetProjectDir, `${file.dest}.${ext}`);
+
+      await fs.mkdir(path.dirname(destPath), { recursive: true });
+      await fs.copyFile(srcPath, destPath);
+    }
+  }
+
+  // 2. Merge dependencies into package.json
+  await mergePackageJson(targetProjectDir, manifest);
+
+  // 3. Perform dynamic layout file nesting
+  await injectProviderToLayout(targetProjectDir, manifest, language);
 }
 
+// ----------------------------------------------------------------------
+// Main Execution Control Loop
+// ----------------------------------------------------------------------
+
 async function main() {
   console.clear();
+
   p.intro(color.bgBlue(color.white("  create-next-mui  ")));
 
+  // ----------------------------------------------------------------------
+  // Add Feature Command Pipeline
+  // ----------------------------------------------------------------------
+
+  if (command === "add") {
+    if (!featureName) {
+      p.cancel(
+        "Please specify a feature.\n\nExample:\ncreate-next-mui add react-query",
+      );
+      process.exit(1);
+    }
+
+    if (!FEATURES.some((f) => f.value === featureName)) {
+      p.cancel(`Unknown feature "${featureName}".`);
+      process.exit(1);
+    }
+
+    const projectRoot = process.cwd();
+
+    // Verify package.json exists in target execution environment
+    try {
+      await fs.access(path.join(projectRoot, "package.json"));
+    } catch {
+      p.cancel(
+        "No package.json found.\nRun this command inside a Next.js project.",
+      );
+      process.exit(1);
+    }
+
+    // Auto-detect layout flavor via tsconfig existence
+    let language = "js";
+    try {
+      await fs.access(path.join(projectRoot, "tsconfig.json"));
+      language = "ts";
+    } catch {
+      // Keep fallback as js configuration
+    }
+
+    const spinner = p.spinner();
+    spinner.start(`Installing ${featureName}...`);
+
+    try {
+      await applyFeature(featureName, projectRoot, language);
+
+      spinner.stop(color.green(`${featureName} installed successfully.`));
+      p.note(`${color.cyan("npm install")}`, "Next Step");
+      p.outro(`✨ ${featureName} added successfully!`);
+      return;
+    } catch (error) {
+      spinner.stop(color.red("Failed to install feature."));
+      p.note(error.message, "Error");
+      process.exit(1);
+    }
+  }
+
+  // ----------------------------------------------------------------------
+  // Interactive Fresh Workspace Scaffolding Pipeline
+  // ----------------------------------------------------------------------
+
   const projectNameError = hasInitialProjectName
     ? validateProjectName(PROJECT_NAME)
     : undefined;
@@ -88,23 +280,22 @@ async function main() {
               placeholder: "my-next-mui-app (or '.' for current directory)",
               validate: validateProjectName,
             }),
+
       language: () =>
         hasYesFlag
           ? Promise.resolve(DEFAULT_LANGUAGE)
           : p.select({
               message: "Choose your language flavor:",
-              options: [
-                {
-                  value: "ts",
-                  label: "TypeScript (Recommended)",
-                  hint: "Strict typings, clean architecture",
-                },
-                {
-                  value: "js",
-                  label: "JavaScript",
-                  hint: "Vanilla JS configuration",
-                },
-              ],
+              options: LANG,
+            }),
+
+      features: () =>
+        hasYesFlag
+          ? Promise.resolve([])
+          : p.multiselect({
+              message: "Select optional features:",
+              required: false,
+              options: FEATURES,
             }),
     },
     {
@@ -115,71 +306,69 @@ async function main() {
     },
   );
 
-  // Define local source paths (inside this CLI package folder)
-  const templateFolderName =
-    project.language === "ts" ? "next-mui-template-ts" : "next-mui-template-js";
-  const sourceTemplateDir = path.resolve(__dirname, "..", templateFolderName);
+  const baseTemplateDir = path.resolve(
+    __dirname,
+    "..",
+    "next-mui-templates",
+    `base-${project.language}`,
+  );
 
-  // Define destination paths (where the user is running the command)
   const targetProjectDir = path.resolve(process.cwd(), project.name);
   const packageName = getPackageName(project.name, targetProjectDir);
 
-  // If targeting current directory, make sure it's clean
   if (project.name === ".") {
     try {
-      const existingFiles = await fs.readdir(targetProjectDir);
-      if (existingFiles.length > 0) {
+      const files = await fs.readdir(targetProjectDir);
+      if (files.length > 0) {
         p.log.error(
           color.red(
-            "The current directory is not empty! Please clear it or specify a project name.",
+            "The current directory is not empty! Please clear it or specify another project name.",
           ),
         );
         process.exit(1);
       }
-    } catch (err) {
-      // If the directory reading fails completely, we exit safely
+    } catch {
       process.exit(1);
     }
   }
 
   const s = p.spinner();
-  s.start("Unboxing your Next.js + MUI foundation locally...");
+  s.start("Scaffolding your Next.js + MUI workspace...");
 
   try {
-    // Native high-speed recursive copy
-    await fs.cp(sourceTemplateDir, targetProjectDir, {
+    // 1. Unpack base layout system
+    await fs.cp(baseTemplateDir, targetProjectDir, {
       recursive: true,
       filter: (src) => {
-        const targetName = path.basename(src);
-        return (
-          targetName !== "node_modules" &&
-          targetName !== ".next" &&
-          targetName !== "out" &&
-          targetName !== "build"
-        );
+        const name = path.basename(src);
+        return !["node_modules", ".next", "out", "build"].includes(name);
       },
     });
+
+    // 2. Map and loop over chosen features sequentially
+    for (const feature of project.features) {
+      await applyFeature(feature, targetProjectDir, project.language);
+    }
+
+    // 3. Finalize package.json configuration naming
     await updateProjectName(targetProjectDir, packageName);
 
     s.stop(color.green("Workspace scaffolded successfully!"));
   } catch (error) {
-    s.stop(color.red("Failed to build workspace structure."));
-    p.note(color.yellow(`Error details: ${error.message}`), "Troubleshooting:");
+    s.stop(color.red("Failed to scaffold workspace."));
+    p.note(color.yellow(error.message), "Troubleshooting");
     process.exit(1);
   }
 
-  // Clear instructions for the developer
-  const isCurrentDir = project.name === ".";
-  const cdInstruction = isCurrentDir
-    ? ""
-    : `${color.cyan(`cd ${project.name}`)}\n`;
+  const cd =
+    project.name === "." ? "" : `${color.cyan(`cd ${project.name}`)}\n`;
 
   p.note(
-    `${cdInstruction}${color.cyan("npm install")}\n${color.cyan("npm run dev")}`,
-    "Next Steps to Get Started:",
+    `${cd}${color.cyan("npm install")}\n${color.cyan("npm run dev")}`,
+    "Next Steps",
   );
 
-  p.outro(`✨ Code cleanly, sort perfectly. Built with create-next-mui!`);
+  p.outro("✨ Build clean and fast with create-next-mui!");
 }
 
 main().catch(console.error);