create-next-mui 0.0.5 → 0.1.1

package/README.md

@@ -1,5 +1,11 @@
+<img width="1420" height="308" alt="CREATE-NEXT-MUI-BANNER" src="https://github.com/user-attachments/assets/11e72fc8-6b6d-40c4-97a1-c05f7b943e02" />
+
 # 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/)
+
 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.
@@ -11,10 +17,18 @@ Stop wasting time wiring up Emotion caches, Next.js App Router layout configs, o
 You don't need to install anything globally. Just run the following command in your terminal:
 
 ```bash
+npx create-next-mui my-next-mui-app
+
+# or use prompts
+
 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.
+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.
 
 ---
 

package/{next-mui-template-ts/esling.config.mjs → next-mui-template-js/eslint.config.mjs}

@@ -18,7 +18,7 @@ const eslintConfig = defineConfig([
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": "off",
       "unused-imports/no-unused-vars": [
-        "off",
+        "warn",
         {
           args: "after-used",
           argsIgnorePattern: "^_",
@@ -26,13 +26,16 @@ const eslintConfig = defineConfig([
           varsIgnorePattern: "^_",
         },
       ],
-      "perfectionist/sort-exports": [1, { order: "asc", type: "line-length" }],
+      "perfectionist/sort-exports": [
+        "warn",
+        { order: "asc", type: "line-length" },
+      ],
       "perfectionist/sort-named-imports": [
-        1,
+        "warn",
         { order: "asc", type: "line-length" },
       ],
       "perfectionist/sort-named-exports": [
-        1,
+        "warn",
         { order: "asc", type: "line-length" },
       ],
       "perfectionist/sort-imports": [
@@ -50,8 +53,6 @@ const eslintConfig = defineConfig([
             "next",
             "mui",
             "external",
-            "type",
-            "internal-types",
             "internal-lib",
             "internal-hooks",
             "internal-actions",
@@ -71,7 +72,6 @@ const eslintConfig = defineConfig([
               next: ["^next", "^next/.*", "cookies-next"],
               mui: ["^@mui/.*", "^@emotion/.*"],
               icons: ["^lucide-react$"],
-              "internal-types": ["^@/types/.*"],
               "internal-lib": ["^@/lib/.*"],
               "internal-actions": ["^@/actions/.*"],
               "internal-hooks": ["^@/hooks/.*"],

package/next-mui-template-js/jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "ignoreDeprecations": "6.0"
+  },
+  "include": ["**/*.js", "**/*.jsx", "**/*.mjs", "**/*.json"],
+  "exclude": ["node_modules", ".next", "out", "build"]
+}

package/next-mui-template-js/next.config.js

@@ -0,0 +1,5 @@
+const nextConfig = {
+  trailingSlash: true,
+};
+
+export default nextConfig;

package/next-mui-template-js/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint ./src --fix "
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",

package/next-mui-template-js/public/mui.svg

@@ -0,0 +1,11 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.16602 20.8334L29.166 37.5V120.833L4.16602 104.167V20.8334Z" fill="#29B6F6"/>
+<path d="M195.834 83.3333L170.834 100V154.167L195.834 137.5V83.3333Z" fill="#0288D1"/>
+<path d="M195.834 25L170.834 41.6667V70.8333L195.834 54.1667V25Z" fill="#0288D1"/>
+<path d="M145.834 20.8334L120.834 37.5V120.833L145.834 104.167V20.8334Z" fill="#0288D1"/>
+<path d="M4.16602 50L74.9993 95.8334V66.6667L4.16602 20.8334V50Z" fill="#29B6F6"/>
+<path d="M145.833 50L75 95.8334V66.6667L145.833 20.8334V50Z" fill="#0288D1"/>
+<path d="M145.833 108.333L75 154.167V125L145.833 79.1666V108.333Z" fill="#0288D1"/>
+<path d="M195.833 141.667L125 187.5V158.333L195.833 112.5V141.667Z" fill="#0288D1"/>
+<path d="M125 157.354L75 125V154.167L125 186.521V157.354Z" fill="#29B6F6"/>
+</svg>

package/next-mui-template-js/public/next.svg

@@ -1 +1,23 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
+<svg width="212" height="212" viewBox="0 0 212 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M106 193.158C154.137 193.158 193.159 154.136 193.159 106C193.159 57.8637 154.137 18.8415 106 18.8415C57.864 18.8415 18.8418 57.8637 18.8418 106C18.8418 154.136 57.864 193.158 106 193.158Z" fill="url(#paint0_linear_694_4)"/>
+<path d="M83.9824 70.7859H70.6309V141.435H83.9824V70.7859Z" fill="white"/>
+<path d="M141.281 70.4767H128.238V134.916H141.281V70.4767Z" fill="url(#paint1_linear_694_4)"/>
+<path d="M162.449 168.248L150.908 172.647L70.6309 70.7859H86.1599L162.449 168.248Z" fill="url(#paint2_linear_694_4)"/>
+<defs>
+<linearGradient id="paint0_linear_694_4" x1="106" y1="193.158" x2="106" y2="18.8415" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0A070A"/>
+<stop offset="0.465" stop-color="#2B2B2B"/>
+<stop offset="1" stop-color="#4B4B4B"/>
+</linearGradient>
+<linearGradient id="paint1_linear_694_4" x1="134.762" y1="145.843" x2="134.762" y2="81.4036" gradientUnits="userSpaceOnUse">
+<stop offset="0.377" stop-color="white" stop-opacity="0"/>
+<stop offset="0.666" stop-color="white" stop-opacity="0.3"/>
+<stop offset="0.988" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint2_linear_694_4" x1="97.6167" y1="94.7065" x2="161.919" y2="179.003" gradientUnits="userSpaceOnUse">
+<stop offset="0.296" stop-color="white"/>
+<stop offset="0.521" stop-color="white" stop-opacity="0.5"/>
+<stop offset="0.838" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/next-mui-template-js/src/app/{layout.tsx → layout.jsx}

@@ -2,8 +2,6 @@ import "./globals.css";
 
 import { Geist, Geist_Mono } from "next/font/google";
 
-import type { Metadata } from "next";
-
 import { ThemeProvider } from "@/theme/theme-provider";
 
 // ---------------------------------------------------------------
@@ -18,16 +16,12 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = {
+export const metadata = {
   title: "create-next-mui",
-  description: "create your nextjs project with mui setup",
+  description: "The fastest way to scaffold Nextjs + MUI",
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }) {
   return (
     <html
       lang="en"

package/next-mui-template-js/src/config-global.js

@@ -0,0 +1,6 @@
+export const CONFIG = {
+  /**
+   * @defaultMode "dark" | "light"
+   */
+  defaultMode: "dark",
+};

package/next-mui-template-js/src/lib/router-link/index.js

@@ -0,0 +1,5 @@
+"use client";
+
+import Link from "next/link";
+
+export { Link as RouterLink };

package/next-mui-template-js/src/sections/home/view.jsx

@@ -0,0 +1,160 @@
+"use client";
+
+import Image from "next/image";
+
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Button from "@mui/material/Button";
+import SvgIcon from "@mui/material/SvgIcon";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import { alpha as hexAlpha } from "@mui/material/styles";
+
+import { RouterLink } from "@/lib/router-link";
+
+// ---------------------------------------------------------------
+
+export function HomeView() {
+  return (
+    <Box>
+      <Container maxWidth="md">
+        <Stack
+          sx={{
+            minHeight: "100vh",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          spacing={8}
+        >
+          <Stack direction="row" sx={{ alignItems: "center" }} spacing={8}>
+            <Box>
+              <Image
+                width={180}
+                height={180}
+                alt="nextjs"
+                src="/next.svg"
+                loading="eager"
+              />
+            </Box>
+
+            <Box>
+              <SvgIcon
+                fill="none"
+                stroke="#fff"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                sx={{ width: 80, height: 80 }}
+                className="lucide lucide-plus-icon lucide-plus"
+              >
+                <path d="M5 12h14" />
+                <path d="M12 5v14" />
+              </SvgIcon>
+            </Box>
+
+            <Box>
+              <Image
+                width={150}
+                height={150}
+                alt="nextjs"
+                src="/mui.svg"
+                loading="eager"
+              />
+            </Box>
+          </Stack>
+
+          <Stack spacing={4} sx={{ alignItems: "center" }}>
+            <Stack direction="row" spacing={2}>
+              <Button
+                variant="outlined"
+                LinkComponent={RouterLink}
+                href="https://github.com/thatonevikash/create-next-mui/"
+                target="_blank"
+                sx={(theme) => ({
+                  px: 1.5,
+                  borderRadius: 4,
+                  border: `1px solid ${theme.palette.divider}`,
+                })}
+              >
+                <SvgIcon
+                  fill="none"
+                  viewBox="0 0 200 200"
+                  sx={{ width: 44, height: 44 }}
+                >
+                  <path
+                    fill="white"
+                    d="M100 20C55.82 20 20 55.82 20 100C20 137.487 45.8133 168.853 80.6133 177.533C80.24 176.453 80 175.2 80 173.647V159.973C76.7533 159.973 71.3133 159.973 69.9467 159.973C64.4733 159.973 59.6067 157.62 57.2467 153.247C54.6267 148.387 54.1733 140.953 47.68 136.407C45.7533 134.893 47.22 133.167 49.44 133.4C53.54 134.56 56.94 137.373 60.14 141.547C63.3267 145.727 64.8267 146.673 70.78 146.673C73.6667 146.673 77.9867 146.507 82.0533 145.867C84.24 140.313 88.02 135.2 92.64 132.787C66 130.047 53.2867 116.793 53.2867 98.8C53.2867 91.0534 56.5867 83.56 62.1933 77.2467C60.3533 70.98 58.04 58.2 62.9 53.3333C74.8867 53.3333 82.1333 61.1067 83.8733 63.2067C89.8467 61.16 96.4067 60 103.3 60C110.207 60 116.793 61.16 122.78 63.22C124.5 61.1334 131.753 53.3333 143.767 53.3333C148.647 58.2067 146.307 71.04 144.447 77.2934C150.02 83.5934 153.3 91.0667 153.3 98.8C153.3 116.78 140.607 130.027 114.007 132.78C121.327 136.6 126.667 147.333 126.667 155.42V173.647C126.667 174.34 126.513 174.84 126.433 175.433C157.607 164.507 180 134.907 180 100C180 55.82 144.18 20 100 20Z"
+                  />
+                </SvgIcon>
+              </Button>
+              <Paper variant="outlined" sx={{ px: 4, py: 2, borderRadius: 4 }}>
+                <Typography
+                  variant="h5"
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.2,
+                  }}
+                >
+                  <Box component="span" sx={{ color: "text.secondary" }}>
+                    npx
+                  </Box>
+
+                  <Box component="span">create-next-mui</Box>
+
+                  <Box
+                    sx={(theme) => ({
+                      p: 1,
+                      ml: 1,
+                      borderRadius: 2,
+                      cursor: "pointer",
+                      bgcolor: hexAlpha(theme.palette.grey["800"], 0.2),
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    })}
+                  >
+                    <SvgIcon
+                      strokeWidth="2"
+                      stroke="#dadada"
+                      viewBox="0 0 24 24"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      sx={{ fill: "transparent" }}
+                      className="lucide lucide-copy-icon lucide-copy"
+                    >
+                      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                    </SvgIcon>
+                  </Box>
+                </Typography>
+              </Paper>
+            </Stack>
+
+            <Typography variant="caption" sx={{ color: "text.disabled" }}>
+              The fastest way to scaffold&nbsp;
+              <Link
+                component={RouterLink}
+                href="https://nextjs.org/"
+                target="_blank"
+              >
+                Nextjs
+              </Link>
+              &nbsp;+&nbsp;
+              <Link
+                component={RouterLink}
+                href="https://mui.com/"
+                target="_blank"
+              >
+                MUI
+              </Link>
+            </Typography>
+          </Stack>
+        </Stack>
+      </Container>
+    </Box>
+  );
+}

package/next-mui-template-js/src/theme/core/components/{button.ts → button.js}

@@ -1,10 +1,6 @@
-import { Theme, Components } from "@mui/material";
-
-import type {} from "@mui/material/themeCssVarsAugmentation";
-
 // ---------------------------------------------------------------
 
-const MuiButton: Components<Theme>["MuiButton"] = {
+const MuiButton = {
   styleOverrides: {
     root: ({ theme }) => ({
       textTransform: "unset",

package/next-mui-template-js/src/theme/core/components/{card.ts → card.js}

@@ -1,10 +1,6 @@
-import { Theme, Components } from "@mui/material";
-
-import type {} from "@mui/material/themeCssVarsAugmentation";
-
 // ---------------------------------------------------------------
 
-const MuiCard: Components<Theme>["MuiCard"] = {
+const MuiCard = {
   styleOverrides: {
     root: ({ theme }) => ({
       borderRadius: theme.spacing(2.5),

package/next-mui-template-js/src/theme/core/{palette.ts → palette.js}

@@ -21,14 +21,3 @@ export const palette = {
   success: SUCCESS,
   warning: WARNING,
 };
-
-// ---------------------------------------------------------------
-
-declare module "@mui/material/styles" {
-  interface Palette {
-    purple: Palette["primary"];
-  }
-  interface PaletteOptions {
-    purple?: PaletteOptions["primary"];
-  }
-}

package/next-mui-template-js/src/theme/{create-theme.ts → create-theme.js}

@@ -1,9 +1,13 @@
 import { createTheme } from "@mui/material";
 
+import { CONFIG } from "@/config-global";
+
 import { palette } from "./core/palette";
 import { typography } from "./core/typography";
 import { components } from "./core/components";
 
+const { defaultMode } = CONFIG;
+
 // ---------------------------------------------------------------
 
 const defaultFont = "var(--font-geist-sans), Arial, sans-serif";
@@ -11,7 +15,7 @@ const defaultFont = "var(--font-geist-sans), Arial, sans-serif";
 export const theme = createTheme({
   cssVariables: true,
 
-  palette: { mode: "light", ...palette },
+  palette: { mode: defaultMode, ...palette },
 
   typography: {
     fontFamily: defaultFont,

package/next-mui-template-js/src/theme/{theme-provider.tsx → theme-provider.jsx}

@@ -7,7 +7,7 @@ import { theme } from "./create-theme";
 
 // ---------------------------------------------------------------
 
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
+export function ThemeProvider({ children }) {
   return (
     <AppRouterCacheProvider>
       <MuiThemeProvider theme={theme}>

package/next-mui-template-ts/.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.quickSuggestions": {
-    "other": false,
+    "other": true,
     "comments": false,
     "strings": false
   }

package/next-mui-template-ts/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint ./src --fix "
+    "lint": "eslint ./src",
+    "lint:fix": "eslint ./src --fix"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",

package/next-mui-template-ts/public/mui.svg

@@ -0,0 +1,11 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.16602 20.8334L29.166 37.5V120.833L4.16602 104.167V20.8334Z" fill="#29B6F6"/>
+<path d="M195.834 83.3333L170.834 100V154.167L195.834 137.5V83.3333Z" fill="#0288D1"/>
+<path d="M195.834 25L170.834 41.6667V70.8333L195.834 54.1667V25Z" fill="#0288D1"/>
+<path d="M145.834 20.8334L120.834 37.5V120.833L145.834 104.167V20.8334Z" fill="#0288D1"/>
+<path d="M4.16602 50L74.9993 95.8334V66.6667L4.16602 20.8334V50Z" fill="#29B6F6"/>
+<path d="M145.833 50L75 95.8334V66.6667L145.833 20.8334V50Z" fill="#0288D1"/>
+<path d="M145.833 108.333L75 154.167V125L145.833 79.1666V108.333Z" fill="#0288D1"/>
+<path d="M195.833 141.667L125 187.5V158.333L195.833 112.5V141.667Z" fill="#0288D1"/>
+<path d="M125 157.354L75 125V154.167L125 186.521V157.354Z" fill="#29B6F6"/>
+</svg>

package/next-mui-template-ts/public/next.svg

@@ -1 +1,23 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
+<svg width="212" height="212" viewBox="0 0 212 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M106 193.158C154.137 193.158 193.159 154.136 193.159 106C193.159 57.8637 154.137 18.8415 106 18.8415C57.864 18.8415 18.8418 57.8637 18.8418 106C18.8418 154.136 57.864 193.158 106 193.158Z" fill="url(#paint0_linear_694_4)"/>
+<path d="M83.9824 70.7859H70.6309V141.435H83.9824V70.7859Z" fill="white"/>
+<path d="M141.281 70.4767H128.238V134.916H141.281V70.4767Z" fill="url(#paint1_linear_694_4)"/>
+<path d="M162.449 168.248L150.908 172.647L70.6309 70.7859H86.1599L162.449 168.248Z" fill="url(#paint2_linear_694_4)"/>
+<defs>
+<linearGradient id="paint0_linear_694_4" x1="106" y1="193.158" x2="106" y2="18.8415" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0A070A"/>
+<stop offset="0.465" stop-color="#2B2B2B"/>
+<stop offset="1" stop-color="#4B4B4B"/>
+</linearGradient>
+<linearGradient id="paint1_linear_694_4" x1="134.762" y1="145.843" x2="134.762" y2="81.4036" gradientUnits="userSpaceOnUse">
+<stop offset="0.377" stop-color="white" stop-opacity="0"/>
+<stop offset="0.666" stop-color="white" stop-opacity="0.3"/>
+<stop offset="0.988" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint2_linear_694_4" x1="97.6167" y1="94.7065" x2="161.919" y2="179.003" gradientUnits="userSpaceOnUse">
+<stop offset="0.296" stop-color="white"/>
+<stop offset="0.521" stop-color="white" stop-opacity="0.5"/>
+<stop offset="0.838" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/next-mui-template-ts/src/app/layout.tsx

@@ -20,7 +20,7 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
   title: "create-next-mui",
-  description: "create your nextjs project with mui setup",
+  description: "The fastest way to scaffold Nextjs + MUI",
 };
 
 export default function RootLayout({

package/next-mui-template-ts/src/config-global.ts

@@ -0,0 +1,7 @@
+interface GlobalConfig {
+  defaultMode: "light" | "dark";
+}
+
+export const CONFIG: GlobalConfig = {
+  defaultMode: "dark",
+};

package/next-mui-template-ts/src/sections/home/view.tsx

@@ -1,49 +1,160 @@
 "use client";
 
+import Image from "next/image";
+
 import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Paper from "@mui/material/Paper";
 import Stack from "@mui/material/Stack";
 import Button from "@mui/material/Button";
+import SvgIcon from "@mui/material/SvgIcon";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
+import { alpha as hexAlpha } from "@mui/material/styles";
+
 import { RouterLink } from "@/lib/router-link";
 
 // ---------------------------------------------------------------
 
 export function HomeView() {
   return (
-    <Container maxWidth="md">
-      <Box
-        sx={{
-          minHeight: "100vh",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <Stack spacing={3} sx={{ alignItems: "center", textAlign: "center" }}>
-          <Typography variant="h2" component="h1">
-            Workspace Scaffolded Successfully!
-          </Typography>
-          <Typography variant="h6" color="text.secondary">
-            Next.js App Router + Modular MUI Theming System + Perfectionist
-            Linting Rules are locked and loaded.
-          </Typography>
-          <Stack direction="row" spacing={2}>
-            <Button variant="contained" color="primary" size="large">
-              Explore Theme Configuration
-            </Button>
-            <Button
-              size="large"
-              color="secondary"
-              variant="outlined"
-              LinkComponent={RouterLink}
-              href="/"
-            >
-              Read Documentation
-            </Button>
+    <Box>
+      <Container maxWidth="md">
+        <Stack
+          sx={{
+            minHeight: "100vh",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          spacing={8}
+        >
+          <Stack direction="row" sx={{ alignItems: "center" }} spacing={8}>
+            <Box>
+              <Image
+                width={180}
+                height={180}
+                alt="nextjs"
+                src="/next.svg"
+                loading="eager"
+              />
+            </Box>
+
+            <Box>
+              <SvgIcon
+                fill="none"
+                stroke="#fff"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                sx={{ width: 80, height: 80 }}
+                className="lucide lucide-plus-icon lucide-plus"
+              >
+                <path d="M5 12h14" />
+                <path d="M12 5v14" />
+              </SvgIcon>
+            </Box>
+
+            <Box>
+              <Image
+                width={150}
+                height={150}
+                alt="nextjs"
+                src="/mui.svg"
+                loading="eager"
+              />
+            </Box>
+          </Stack>
+
+          <Stack spacing={4} sx={{ alignItems: "center" }}>
+            <Stack direction="row" spacing={2}>
+              <Button
+                variant="outlined"
+                LinkComponent={RouterLink}
+                href="https://github.com/thatonevikash/create-next-mui/"
+                target="_blank"
+                sx={(theme) => ({
+                  px: 1.5,
+                  borderRadius: 4,
+                  border: `1px solid ${theme.palette.divider}`,
+                })}
+              >
+                <SvgIcon
+                  fill="none"
+                  viewBox="0 0 200 200"
+                  sx={{ width: 44, height: 44 }}
+                >
+                  <path
+                    fill="white"
+                    d="M100 20C55.82 20 20 55.82 20 100C20 137.487 45.8133 168.853 80.6133 177.533C80.24 176.453 80 175.2 80 173.647V159.973C76.7533 159.973 71.3133 159.973 69.9467 159.973C64.4733 159.973 59.6067 157.62 57.2467 153.247C54.6267 148.387 54.1733 140.953 47.68 136.407C45.7533 134.893 47.22 133.167 49.44 133.4C53.54 134.56 56.94 137.373 60.14 141.547C63.3267 145.727 64.8267 146.673 70.78 146.673C73.6667 146.673 77.9867 146.507 82.0533 145.867C84.24 140.313 88.02 135.2 92.64 132.787C66 130.047 53.2867 116.793 53.2867 98.8C53.2867 91.0534 56.5867 83.56 62.1933 77.2467C60.3533 70.98 58.04 58.2 62.9 53.3333C74.8867 53.3333 82.1333 61.1067 83.8733 63.2067C89.8467 61.16 96.4067 60 103.3 60C110.207 60 116.793 61.16 122.78 63.22C124.5 61.1334 131.753 53.3333 143.767 53.3333C148.647 58.2067 146.307 71.04 144.447 77.2934C150.02 83.5934 153.3 91.0667 153.3 98.8C153.3 116.78 140.607 130.027 114.007 132.78C121.327 136.6 126.667 147.333 126.667 155.42V173.647C126.667 174.34 126.513 174.84 126.433 175.433C157.607 164.507 180 134.907 180 100C180 55.82 144.18 20 100 20Z"
+                  />
+                </SvgIcon>
+              </Button>
+              <Paper variant="outlined" sx={{ px: 4, py: 2, borderRadius: 4 }}>
+                <Typography
+                  variant="h5"
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1.2,
+                  }}
+                >
+                  <Box component="span" sx={{ color: "text.secondary" }}>
+                    npx
+                  </Box>
+
+                  <Box component="span">create-next-mui</Box>
+
+                  <Box
+                    sx={(theme) => ({
+                      p: 1,
+                      ml: 1,
+                      borderRadius: 2,
+                      cursor: "pointer",
+                      bgcolor: hexAlpha(theme.palette.grey["800"], 0.2),
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    })}
+                  >
+                    <SvgIcon
+                      strokeWidth="2"
+                      stroke="#dadada"
+                      viewBox="0 0 24 24"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      sx={{ fill: "transparent" }}
+                      className="lucide lucide-copy-icon lucide-copy"
+                    >
+                      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                    </SvgIcon>
+                  </Box>
+                </Typography>
+              </Paper>
+            </Stack>
+
+            <Typography variant="caption" sx={{ color: "text.disabled" }}>
+              The fastest way to scaffold&nbsp;
+              <Link
+                component={RouterLink}
+                href="https://nextjs.org/"
+                target="_blank"
+              >
+                Nextjs
+              </Link>
+              &nbsp;+&nbsp;
+              <Link
+                component={RouterLink}
+                href="https://mui.com/"
+                target="_blank"
+              >
+                MUI
+              </Link>
+            </Typography>
           </Stack>
         </Stack>
-      </Box>
-    </Container>
+      </Container>
+    </Box>
   );
 }

package/next-mui-template-ts/src/theme/core/components/button.ts

@@ -17,6 +17,10 @@ const MuiButton: Components<Theme>["MuiButton"] = {
             borderRadius: theme.spacing(1.5),
             color: theme.vars.palette.common.white,
             backgroundColor: theme.vars.palette.grey[900],
+            ...theme.applyStyles("dark", {
+              color: theme.vars.palette.common.black,
+              backgroundColor: theme.vars.palette.grey[100],
+            }),
           },
         },
         {
@@ -24,7 +28,11 @@ const MuiButton: Components<Theme>["MuiButton"] = {
           style: {
             borderRadius: theme.spacing(1.5),
             color: theme.vars.palette.common.black,
-            borderColor: theme.vars.palette.common.black,
+            borderColor: theme.vars.palette.grey[900],
+            ...theme.applyStyles("dark", {
+              color: theme.vars.palette.common.white,
+              borderColor: theme.vars.palette.grey[100],
+            }),
           },
         },
       ],

package/next-mui-template-ts/src/theme/create-theme.ts

@@ -1,17 +1,21 @@
 import { createTheme } from "@mui/material";
 
+import { CONFIG } from "@/config-global";
+
 import { palette } from "./core/palette";
-import { typography } from "./core/typography";
 import { components } from "./core/components";
+import { typography } from "./core/typography";
 
 // ---------------------------------------------------------------
 
+const { defaultMode } = CONFIG;
+
 const defaultFont = "var(--font-geist-sans), Arial, sans-serif";
 
 export const theme = createTheme({
   cssVariables: true,
 
-  palette: { mode: "light", ...palette },
+  palette: { mode: defaultMode, ...palette },
 
   typography: {
     fontFamily: defaultFont,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-mui",
-  "version": "0.0.5",
+  "version": "0.1.1",
   "description": "spin up your nextjs project with mui setup",
   "keywords": [
     "nextjs",

package/src/index.js

@@ -10,25 +10,74 @@ import { fileURLToPath } from "node:url";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+const initialProjectName = process.argv[2];
+const hasInitialProjectName = typeof initialProjectName === "string";
+
+function validateProjectName(value) {
+  if (value.length === 0) return "Project name is required!";
+
+  if (value !== "." && value.match(/[^a-zA-Z0-9-_]/g)) {
+    return "Keep it URL safe or use '.' for the current folder";
+  }
+}
+
+function getPackageName(projectName, targetProjectDir) {
+  const rawName =
+    projectName === "." ? path.basename(targetProjectDir) : projectName;
+
+  return rawName.toLowerCase();
+}
+
+async function updateProjectName(targetProjectDir, packageName) {
+  const files = ["package.json", "package-lock.json"];
+
+  await Promise.all(
+    files.map(async (file) => {
+      const filePath = path.join(targetProjectDir, file);
+
+      try {
+        const content = await fs.readFile(filePath, "utf8");
+        const json = JSON.parse(content);
+
+        json.name = packageName;
+
+        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 main() {
   console.clear();
   p.intro(color.bgBlue(color.white("  create-next-mui  ")));
 
+  const projectNameError = hasInitialProjectName
+    ? validateProjectName(initialProjectName)
+    : undefined;
+
+  if (projectNameError) {
+    p.cancel(projectNameError);
+    process.exit(1);
+  }
+
   const project = await p.group(
     {
       name: () =>
-        p.text({
-          message: "What is your project name?",
-          placeholder: "my-next-mui-app (or '.' for current directory)",
-          validate(value) {
-            if (value.length === 0) return "Project name is required!";
-
-            // ✅ Allow exactly "." otherwise apply your safe character regex
-            if (value !== "." && value.match(/[^a-zA-Z0-9-_]/g)) {
-              return "Keep it URL safe or use '.' for the current folder";
-            }
-          },
-        }),
+        hasInitialProjectName
+          ? Promise.resolve(initialProjectName)
+          : p.text({
+              message: "What is your project name?",
+              placeholder: "my-next-mui-app (or '.' for current directory)",
+              validate: validateProjectName,
+            }),
       language: () =>
         p.select({
           message: "Choose your language flavor:",
@@ -61,6 +110,7 @@ async function main() {
 
   // 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 === ".") {
@@ -97,6 +147,7 @@ async function main() {
         );
       },
     });
+    await updateProjectName(targetProjectDir, packageName);
 
     s.stop(color.green("Workspace scaffolded successfully!"));
   } catch (error) {

package/next-mui-template-js/next.config.ts

@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  trailingSlash: true,
-};
-
-export default nextConfig;

package/next-mui-template-js/src/lib/router-link/index.ts

@@ -1,5 +0,0 @@
-"use client";
-
-import Link, { type LinkProps } from "next/link";
-
-export { Link as RouterLink, LinkProps as RouterLinkProps };

package/next-mui-template-js/src/sections/home/view.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Button from "@mui/material/Button";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import { RouterLink } from "@/lib/router-link";
-
-// ---------------------------------------------------------------
-
-export function HomeView() {
-  return (
-    <Container maxWidth="md">
-      <Box
-        sx={{
-          minHeight: "100vh",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <Stack spacing={3} sx={{ alignItems: "center", textAlign: "center" }}>
-          <Typography variant="h2" component="h1">
-            Workspace Scaffolded Successfully!
-          </Typography>
-          <Typography variant="h6" color="text.secondary">
-            Next.js App Router + Modular MUI Theming System + Perfectionist
-            Linting Rules are locked and loaded.
-          </Typography>
-          <Stack direction="row" spacing={2}>
-            <Button variant="contained" color="primary" size="large">
-              Explore Theme Configuration
-            </Button>
-            <Button
-              size="large"
-              color="secondary"
-              variant="outlined"
-              LinkComponent={RouterLink}
-              href="/"
-            >
-              Read Documentation
-            </Button>
-          </Stack>
-        </Stack>
-      </Box>
-    </Container>
-  );
-}

package/next-mui-template-js/tsconfig.json

@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts"
-  ],
-  "exclude": ["node_modules"]
-}