create-kyro 0.5.4 → 0.6.0

package/dist/index.js

@@ -87,6 +87,12 @@ async function promptUser() {
             value: "kitchen-sink"
           }
         ]
+      },
+      {
+        type: "text",
+        name: "adminEmail",
+        message: "Admin email:",
+        initial: (prev, values) => `admin@${values.projectName}.local`
       }
     ],
     {
@@ -151,16 +157,25 @@ ${cyan("?")} ${bold(msg)}`);
 function generatePackageJson(answers) {
   const deps = {
     "astro": "^6.3.1",
+    "@astrojs/react": "^5.0.4",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "@kyro-cms/core": "latest",
     "@kyro-cms/admin": "latest"
   };
   const devDeps = {
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
   };
   const scripts = {
     "dev": "astro dev",
     "build": "astro build",
-    "preview": "astro preview"
+    "preview": "astro preview",
+    "kyro:dev": "kyro dev",
+    "kyro:generate": "kyro generate"
   };
   if (answers.database === "sqlite") {
     scripts["db:generate"] = "kyro generate";
@@ -207,19 +222,19 @@ function generateKyroConfig(answers) {
   let templateGlobals = "";
   switch (answers.template) {
     case "minimal":
-      templateCollections = "import { minimalCollections } from '@kyro-cms/core/templates';";
+      templateCollections = "import { minimalCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';";
       templateGlobals = "import { coreSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
     case "blog":
-      templateCollections = "import { blogCollections } from '@kyro-cms/core/templates';";
+      templateCollections = "import { blogCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';";
       templateGlobals = "import { allSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
     case "ecommerce":
-      templateCollections = "import { ecommerceCollections } from '@kyro-cms/core/templates';";
+      templateCollections = "import { ecommerceCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';";
       templateGlobals = "import { allSettingsGlobals, ecommerceSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
     case "kitchen-sink":
-      templateCollections = `import { minimalCollections, blogCollections, ecommerceCollections, kitchenSinkCollections } from '@kyro-cms/core/templates';`;
+      templateCollections = `import { minimalCollections, blogCollections, ecommerceCollections, kitchenSinkCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';`;
       templateGlobals = "import { allSettingsGlobals, ecommerceSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
   }
@@ -227,17 +242,31 @@ function generateKyroConfig(answers) {
   if (templateGlobals) imports.push(templateGlobals);
   let collectionsConfig = "";
   if (answers.template === "minimal") {
-    collectionsConfig = `  collections: Object.values(minimalCollections),`;
+    collectionsConfig = `  collections: [
+    ...Object.values(minimalCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
+  ],`;
   } else if (answers.template === "blog") {
-    collectionsConfig = `  collections: Object.values(blogCollections),`;
+    collectionsConfig = `  collections: [
+    ...Object.values(blogCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
+  ],`;
   } else if (answers.template === "ecommerce") {
-    collectionsConfig = `  collections: Object.values(ecommerceCollections),`;
+    collectionsConfig = `  collections: [
+    ...Object.values(ecommerceCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
+  ],`;
   } else if (answers.template === "kitchen-sink") {
     collectionsConfig = `  collections: [
     ...Object.values(minimalCollections),
     ...Object.values(blogCollections),
     ...Object.values(ecommerceCollections),
     ...Object.values(kitchenSinkCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
   ],`;
   }
   let globalsConfig = "";
@@ -256,7 +285,9 @@ export default defineConfig({
 ${adapterLines.join("\n")}
 ${collectionsConfig}
 ${globalsConfig}
-  auth: true,
+  auth: {
+    secret: process.env.APP_SECRET,
+  },
 });`;
 }
 
@@ -265,13 +296,15 @@ function generateAstroConfig(answers) {
   return `import { defineConfig } from 'astro/config';
 import { kyro } from '@kyro-cms/core';
 import { kyroAdmin } from '@kyro-cms/admin';
+import react from '@astrojs/react';
+import tailwind from '@tailwindcss/vite';
 
 export default defineConfig({
   output: 'server',
-  integrations: [
-    kyro({ adminPath: '/admin', apiPath: '/api' }),
-    kyroAdmin({ basePath: '/admin', apiPath: '/api' }),
-  ],
+  integrations: [react(), kyro({ adminPath: '/admin', apiPath: '/api' }), kyroAdmin({ basePath: '/admin', apiPath: '/api' })],
+  vite: {
+    plugins: [tailwind()],
+  },
   server: {
     port: 4321,
     host: true,
@@ -282,19 +315,30 @@ export default defineConfig({
 // src/generators/files.ts
 import { writeFileSync, mkdirSync } from "fs";
 import { join } from "path";
-function generateProjectFiles(answers, projectDir) {
+import { randomBytes } from "crypto";
+function generateAppSecret() {
+  return randomBytes(32).toString("hex");
+}
+function generateProjectFiles(answers, projectDir, adminCredentials) {
   const srcDir = join(projectDir, "src");
   const pagesDir = join(srcDir, "pages");
+  const stylesDir = join(srcDir, "styles");
   const publicDir = join(projectDir, "public");
   mkdirSync(pagesDir, { recursive: true });
+  mkdirSync(stylesDir, { recursive: true });
   mkdirSync(publicDir, { recursive: true });
+  if (answers.database === "sqlite") {
+    mkdirSync(join(projectDir, "data"), { recursive: true });
+  }
   const tsconfig = `{
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
 }`;
   writeFileSync(join(projectDir, "tsconfig.json"), tsconfig);
@@ -333,17 +377,50 @@ Visit [https://kyro.dev](https://kyro.dev) for full documentation.
   const envExample = `# Kyro CMS Configuration
 # Copy this file to .env and fill in your values
 
+NODE_ENV=development
+APP_URL=http://localhost:4321
+
 ${answers.database === "sqlite" ? "# SQLite (local) - no additional config needed" : answers.database === "postgres" ? "# Database connection (PostgreSQL)\nDATABASE_URL=postgresql://user:password@localhost:5432/kyro_cms" : "# MongoDB connection\nMONGODB_URI=mongodb://localhost:27017/kyro_cms"}
 
-# JWT secret for authentication tokens
-JWT_SECRET=change-this-to-a-random-64-character-string
+# App secret (set once; on first run it's stored in the database and can be managed via admin UI)
+APP_SECRET=your-secret-here
 
 # Admin credentials (used for first-user bootstrap)
 # KYRO_ADMIN_EMAIL=admin@example.com
 # KYRO_ADMIN_PASSWORD=SecurePass123!
 `;
   writeFileSync(join(projectDir, ".env.example"), envExample);
+  if (adminCredentials) {
+    const envFile = `# Kyro CMS Configuration
+# Copy this file to .env and fill in your values
+
+NODE_ENV=development
+APP_URL=http://localhost:4321
+
+${answers.database === "sqlite" ? "# SQLite (local) - no additional config needed" : answers.database === "postgres" ? "# Database connection (PostgreSQL)\nDATABASE_URL=postgresql://user:password@localhost:5432/kyro_cms" : "# MongoDB connection\nMONGODB_URI=mongodb://localhost:27017/kyro_cms"}
+
+# App secret (auto-generated; stored in database on first run)
+APP_SECRET=${generateAppSecret()}
+
+# Admin credentials (used for first-user bootstrap)
+KYRO_ADMIN_EMAIL=${adminCredentials.adminEmail}
+KYRO_ADMIN_PASSWORD=${adminCredentials.adminPassword}
+`;
+    writeFileSync(join(projectDir, ".env"), envFile);
+  }
+  const mainCss = `@import "tailwindcss";
+
+@source "./pages/**/*.{astro,html,js,jsx,ts,tsx}";
+@source "./components/**/*.{astro,html,js,jsx,ts,tsx}";
+@source "./layouts/**/*.{astro,html,js,jsx,ts,tsx}";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+`;
+  writeFileSync(join(stylesDir, "main.css"), mainCss);
   const indexPage = `---
+import "../styles/main.css";
 const title = "${answers.projectName}";
 ---
 <!DOCTYPE html>
@@ -353,38 +430,52 @@ const title = "${answers.projectName}";
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
   </head>
-  <body>
-    <main>
-      <h1>Welcome to {title}</h1>
-      <p>Your Kyro CMS is ready.</p>
-      <p><a href="/admin">Go to Admin Dashboard &rarr;</a></p>
-    </main>
+  <body
+    class="min-h-screen bg-gradient-to-br from-stone-50 via-white to-stone-100 dark:from-stone-950 dark:via-stone-900 dark:to-stone-950 text-stone-900 dark:text-stone-100 antialiased"
+  >
+    <div class="relative min-h-screen flex flex-col items-center justify-center px-4">
+      <!-- Decorative background blurs -->
+      <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+        <div class="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-indigo-100/60 dark:bg-indigo-900/20 blur-3xl"></div>
+        <div class="absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-indigo-100/60 dark:bg-indigo-900/20 blur-3xl"></div>
+      </div>
+
+      <main class="relative text-center max-w-lg">
+        <!-- Badge -->
+        <div class="mb-8 inline-flex items-center gap-2 px-3 py-1 rounded-full border border-stone-200 dark:border-stone-700 text-xs font-medium text-stone-500 dark:text-stone-400">
+          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
+          Powered by Kyro CMS
+        </div>
+
+        <!-- Title -->
+        <h1 class="mb-4 text-5xl sm:text-6xl font-black tracking-tight bg-gradient-to-r from-stone-900 to-stone-500 dark:from-white dark:to-stone-400 bg-clip-text text-transparent">
+          {title}
+        </h1>
+
+        <!-- Tagline -->
+        <p class="mb-10 text-lg sm:text-xl text-stone-500 dark:text-stone-400 leading-relaxed">
+          Your content management system is ready. Start building something amazing.
+        </p>
+
+        <!-- Admin link -->
+        <a
+          href="/admin"
+          class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-stone-900 dark:bg-white text-white dark:text-stone-900 font-semibold text-sm hover:bg-stone-800 dark:hover:bg-stone-100 transition-all shadow-lg hover:shadow-xl active:scale-[0.97]"
+        >
+          Go to Admin Dashboard
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+          </svg>
+        </a>
+      </main>
+
+      <!-- Footer -->
+      <footer class="absolute bottom-8 text-xs text-stone-400 dark:text-stone-500">
+        &copy; {new Date().getFullYear()} {title}
+      </footer>
+    </div>
   </body>
 </html>
-
-<style>
-  main {
-    max-width: 800px;
-    margin: 4rem auto;
-    padding: 2rem;
-    text-align: center;
-    font-family: system-ui, sans-serif;
-  }
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-  }
-  p {
-    color: #666;
-  }
-  a {
-    color: #6366f1;
-    text-decoration: none;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-</style>
 `;
   writeFileSync(join(pagesDir, "index.astro"), indexPage);
 }
@@ -393,6 +484,16 @@ const title = "${answers.projectName}";
 import { writeFileSync as writeFileSync2, mkdirSync as mkdirSync2, existsSync } from "fs";
 import { join as join2 } from "path";
 import { execSync } from "child_process";
+import { randomBytes as randomBytes2 } from "crypto";
+function generatePassword(length = 24) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+  const bytes = randomBytes2(length);
+  let password = "";
+  for (let i = 0; i < length; i++) {
+    password += chars[bytes[i] % chars.length];
+  }
+  return password;
+}
 var VERSION = "0.4.0";
 async function main() {
   logger.intro("create-kyro", VERSION);
@@ -402,6 +503,7 @@ async function main() {
     logger.error(`Directory "${answers.projectName}" already exists.`);
     process.exit(1);
   }
+  const adminPassword = generatePassword();
   const steps = [
     "Creating project directory",
     "Generating configuration files",
@@ -424,7 +526,7 @@ async function main() {
   const astroConfig = generateAstroConfig(answers);
   writeFileSync2(join2(projectDir, "astro.config.mjs"), astroConfig);
   logger.success("astro.config.mjs generated");
-  generateProjectFiles(answers, projectDir);
+  generateProjectFiles(answers, projectDir, { adminEmail: answers.adminEmail, adminPassword });
   logger.success("Project files generated");
   logger.step(3, steps.length, steps[2]);
   console.log("  Installing dependencies...");
@@ -457,7 +559,14 @@ async function main() {
   console.log("  Visit http://localhost:4321 to see your app.");
   console.log("  Visit http://localhost:4321/admin for the admin dashboard.");
   console.log("");
-  console.log("  The first user to register will be the super admin.");
+  console.log("  \x1B[33m\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\x1B[0m");
+  console.log("  \x1B[33m  Admin Account Created\x1B[0m");
+  console.log("  \x1B[33m\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\x1B[0m");
+  console.log(`    Email:    \x1B[36m${answers.adminEmail}\x1B[0m`);
+  console.log(`    Password: \x1B[36m${adminPassword}\x1B[0m`);
+  console.log("  \x1B[33m\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\x1B[0m");
+  console.log("  The admin user will be created automatically on first server start.");
+  console.log("  You can change these credentials in the .env file.");
   console.log("");
 }
 main().catch((error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-kyro",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Interactive scaffolding for Kyro CMS projects",
   "type": "module",
   "bin": {

package/src/generators/astro.ts

@@ -4,13 +4,15 @@ export function generateAstroConfig(answers: Answers): string {
   return `import { defineConfig } from 'astro/config';
 import { kyro } from '@kyro-cms/core';
 import { kyroAdmin } from '@kyro-cms/admin';
+import react from '@astrojs/react';
+import tailwind from '@tailwindcss/vite';
 
 export default defineConfig({
   output: 'server',
-  integrations: [
-    kyro({ adminPath: '/admin', apiPath: '/api' }),
-    kyroAdmin({ basePath: '/admin', apiPath: '/api' }),
-  ],
+  integrations: [react(), kyro({ adminPath: '/admin', apiPath: '/api' }), kyroAdmin({ basePath: '/admin', apiPath: '/api' })],
+  vite: {
+    plugins: [tailwind()],
+  },
   server: {
     port: 4321,
     host: true,

package/src/generators/config.ts

@@ -30,22 +30,22 @@ export function generateKyroConfig(answers: Answers): string {
   switch (answers.template) {
     case "minimal":
       templateCollections =
-        "import { minimalCollections } from '@kyro-cms/core/templates';";
+        "import { minimalCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';";
       templateGlobals =
         "import { coreSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
     case "blog":
-      templateCollections = "import { blogCollections } from '@kyro-cms/core/templates';";
+      templateCollections = "import { blogCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';";
       templateGlobals =
         "import { allSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
     case "ecommerce":
-      templateCollections = "import { ecommerceCollections } from '@kyro-cms/core/templates';";
+      templateCollections = "import { ecommerceCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';";
       templateGlobals =
         "import { allSettingsGlobals, ecommerceSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
     case "kitchen-sink":
-      templateCollections = `import { minimalCollections, blogCollections, ecommerceCollections, kitchenSinkCollections } from '@kyro-cms/core/templates';`;
+      templateCollections = `import { minimalCollections, blogCollections, ecommerceCollections, kitchenSinkCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';`;
       templateGlobals =
         "import { allSettingsGlobals, ecommerceSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
@@ -56,17 +56,31 @@ export function generateKyroConfig(answers: Answers): string {
 
   let collectionsConfig = "";
   if (answers.template === "minimal") {
-    collectionsConfig = `  collections: Object.values(minimalCollections),`;
+    collectionsConfig = `  collections: [
+    ...Object.values(minimalCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
+  ],`;
   } else if (answers.template === "blog") {
-    collectionsConfig = `  collections: Object.values(blogCollections),`;
+    collectionsConfig = `  collections: [
+    ...Object.values(blogCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
+  ],`;
   } else if (answers.template === "ecommerce") {
-    collectionsConfig = `  collections: Object.values(ecommerceCollections),`;
+    collectionsConfig = `  collections: [
+    ...Object.values(ecommerceCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
+  ],`;
   } else if (answers.template === "kitchen-sink") {
     collectionsConfig = `  collections: [
     ...Object.values(minimalCollections),
     ...Object.values(blogCollections),
     ...Object.values(ecommerceCollections),
     ...Object.values(kitchenSinkCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
   ],`;
   }
 
@@ -89,6 +103,8 @@ export default defineConfig({
 ${adapterLines.join("\n")}
 ${collectionsConfig}
 ${globalsConfig}
-  auth: true,
+  auth: {
+    secret: process.env.APP_SECRET,
+  },
 });`;
 }

package/src/generators/files.ts

@@ -1,25 +1,44 @@
 import type { Answers } from "../prompts.js";
 import { writeFileSync, mkdirSync } from "fs";
 import { join } from "path";
+import { randomBytes } from "crypto";
+
+function generateAppSecret(): string {
+  return randomBytes(32).toString("hex");
+}
+
+export interface AdminCredentials {
+  adminEmail: string;
+  adminPassword: string;
+}
 
 export function generateProjectFiles(
   answers: Answers,
   projectDir: string,
+  adminCredentials?: AdminCredentials,
 ): void {
   const srcDir = join(projectDir, "src");
   const pagesDir = join(srcDir, "pages");
+  const stylesDir = join(srcDir, "styles");
   const publicDir = join(projectDir, "public");
 
   mkdirSync(pagesDir, { recursive: true });
+  mkdirSync(stylesDir, { recursive: true });
   mkdirSync(publicDir, { recursive: true });
 
+  if (answers.database === "sqlite") {
+    mkdirSync(join(projectDir, "data"), { recursive: true });
+  }
+
   const tsconfig = `{
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
 }`;
 
@@ -64,16 +83,18 @@ Visit [https://kyro.dev](https://kyro.dev) for full documentation.
   const envExample = `# Kyro CMS Configuration
 # Copy this file to .env and fill in your values
 
-${
-  answers.database === "sqlite"
-    ? "# SQLite (local) - no additional config needed"
-    : answers.database === "postgres"
-      ? "# Database connection (PostgreSQL)\nDATABASE_URL=postgresql://user:password@localhost:5432/kyro_cms"
-      : "# MongoDB connection\nMONGODB_URI=mongodb://localhost:27017/kyro_cms"
-}
+NODE_ENV=development
+APP_URL=http://localhost:4321
 
-# JWT secret for authentication tokens
-JWT_SECRET=change-this-to-a-random-64-character-string
+${answers.database === "sqlite"
+      ? "# SQLite (local) - no additional config needed"
+      : answers.database === "postgres"
+        ? "# Database connection (PostgreSQL)\nDATABASE_URL=postgresql://user:password@localhost:5432/kyro_cms"
+        : "# MongoDB connection\nMONGODB_URI=mongodb://localhost:27017/kyro_cms"
+    }
+
+# App secret (set once; on first run it's stored in the database and can be managed via admin UI)
+APP_SECRET=your-secret-here
 
 # Admin credentials (used for first-user bootstrap)
 # KYRO_ADMIN_EMAIL=admin@example.com
@@ -82,7 +103,46 @@ JWT_SECRET=change-this-to-a-random-64-character-string
 
   writeFileSync(join(projectDir, ".env.example"), envExample);
 
+  if (adminCredentials) {
+    const envFile = `# Kyro CMS Configuration
+# Copy this file to .env and fill in your values
+
+NODE_ENV=development
+APP_URL=http://localhost:4321
+
+${answers.database === "sqlite"
+        ? "# SQLite (local) - no additional config needed"
+        : answers.database === "postgres"
+          ? "# Database connection (PostgreSQL)\nDATABASE_URL=postgresql://user:password@localhost:5432/kyro_cms"
+          : "# MongoDB connection\nMONGODB_URI=mongodb://localhost:27017/kyro_cms"
+      }
+
+# App secret (auto-generated; stored in database on first run)
+APP_SECRET=${generateAppSecret()}
+
+# Admin credentials (used for first-user bootstrap)
+KYRO_ADMIN_EMAIL=${adminCredentials.adminEmail}
+KYRO_ADMIN_PASSWORD=${adminCredentials.adminPassword}
+`;
+
+    writeFileSync(join(projectDir, ".env"), envFile);
+  }
+
+  const mainCss = `@import "tailwindcss";
+
+@source "./pages/**/*.{astro,html,js,jsx,ts,tsx}";
+@source "./components/**/*.{astro,html,js,jsx,ts,tsx}";
+@source "./layouts/**/*.{astro,html,js,jsx,ts,tsx}";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+`;
+
+  writeFileSync(join(stylesDir, "main.css"), mainCss);
+
   const indexPage = `---
+import "../styles/main.css";
 const title = "${answers.projectName}";
 ---
 <!DOCTYPE html>
@@ -92,38 +152,52 @@ const title = "${answers.projectName}";
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
   </head>
-  <body>
-    <main>
-      <h1>Welcome to {title}</h1>
-      <p>Your Kyro CMS is ready.</p>
-      <p><a href="/admin">Go to Admin Dashboard &rarr;</a></p>
-    </main>
+  <body
+    class="min-h-screen bg-gradient-to-br from-stone-50 via-white to-stone-100 dark:from-stone-950 dark:via-stone-900 dark:to-stone-950 text-stone-900 dark:text-stone-100 antialiased"
+  >
+    <div class="relative min-h-screen flex flex-col items-center justify-center px-4">
+      <!-- Decorative background blurs -->
+      <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+        <div class="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-indigo-100/60 dark:bg-indigo-900/20 blur-3xl"></div>
+        <div class="absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-indigo-100/60 dark:bg-indigo-900/20 blur-3xl"></div>
+      </div>
+
+      <main class="relative text-center max-w-lg">
+        <!-- Badge -->
+        <div class="mb-8 inline-flex items-center gap-2 px-3 py-1 rounded-full border border-stone-200 dark:border-stone-700 text-xs font-medium text-stone-500 dark:text-stone-400">
+          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
+          Powered by Kyro CMS
+        </div>
+
+        <!-- Title -->
+        <h1 class="mb-4 text-5xl sm:text-6xl font-black tracking-tight bg-gradient-to-r from-stone-900 to-stone-500 dark:from-white dark:to-stone-400 bg-clip-text text-transparent">
+          {title}
+        </h1>
+
+        <!-- Tagline -->
+        <p class="mb-10 text-lg sm:text-xl text-stone-500 dark:text-stone-400 leading-relaxed">
+          Your content management system is ready. Start building something amazing.
+        </p>
+
+        <!-- Admin link -->
+        <a
+          href="/admin"
+          class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-stone-900 dark:bg-white text-white dark:text-stone-900 font-semibold text-sm hover:bg-stone-800 dark:hover:bg-stone-100 transition-all shadow-lg hover:shadow-xl active:scale-[0.97]"
+        >
+          Go to Admin Dashboard
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+          </svg>
+        </a>
+      </main>
+
+      <!-- Footer -->
+      <footer class="absolute bottom-8 text-xs text-stone-400 dark:text-stone-500">
+        &copy; {new Date().getFullYear()} {title}
+      </footer>
+    </div>
   </body>
 </html>
-
-<style>
-  main {
-    max-width: 800px;
-    margin: 4rem auto;
-    padding: 2rem;
-    text-align: center;
-    font-family: system-ui, sans-serif;
-  }
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-  }
-  p {
-    color: #666;
-  }
-  a {
-    color: #6366f1;
-    text-decoration: none;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-</style>
 `;
 
   writeFileSync(join(pagesDir, "index.astro"), indexPage);

package/src/generators/packagejson.ts

@@ -15,18 +15,27 @@ export function generatePackageJson(
 ): PackageJson {
   const deps: Record<string, string> = {
     "astro": "^6.3.1",
+    "@astrojs/react": "^5.0.4",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "@kyro-cms/core": "latest",
     "@kyro-cms/admin": "latest",
   };
 
   const devDeps: Record<string, string> = {
     "typescript": "^5.7.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
   };
 
   const scripts: Record<string, string> = {
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "kyro:dev": "kyro dev",
+    "kyro:generate": "kyro generate",
   };
 
   if (answers.database === "sqlite") {

package/src/index.ts

@@ -7,6 +7,17 @@ import { generateProjectFiles } from './generators/files.js';
 import { writeFileSync, mkdirSync, existsSync } from 'fs';
 import { join } from 'path';
 import { execSync } from 'child_process';
+import { randomBytes } from 'crypto';
+
+function generatePassword(length = 24): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
+  const bytes = randomBytes(length);
+  let password = '';
+  for (let i = 0; i < length; i++) {
+    password += chars[bytes[i] % chars.length];
+  }
+  return password;
+}
 
 const VERSION = '0.4.0';
 
@@ -21,6 +32,8 @@ async function main() {
     process.exit(1);
   }
 
+  const adminPassword = generatePassword();
+
   const steps = [
     'Creating project directory',
     'Generating configuration files',
@@ -49,7 +62,7 @@ async function main() {
   writeFileSync(join(projectDir, 'astro.config.mjs'), astroConfig);
   logger.success('astro.config.mjs generated');
 
-  generateProjectFiles(answers, projectDir);
+  generateProjectFiles(answers, projectDir, { adminEmail: answers.adminEmail, adminPassword });
   logger.success('Project files generated');
 
   logger.step(3, steps.length, steps[2]);
@@ -87,7 +100,14 @@ async function main() {
   console.log('  Visit http://localhost:4321 to see your app.');
   console.log('  Visit http://localhost:4321/admin for the admin dashboard.');
   console.log('');
-  console.log('  The first user to register will be the super admin.');
+  console.log('  \x1b[33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\x1b[0m');
+  console.log('  \x1b[33m  Admin Account Created\x1b[0m');
+  console.log('  \x1b[33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\x1b[0m');
+  console.log(`    Email:    \x1b[36m${answers.adminEmail}\x1b[0m`);
+  console.log(`    Password: \x1b[36m${adminPassword}\x1b[0m`);
+  console.log('  \x1b[33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\x1b[0m');
+  console.log('  The admin user will be created automatically on first server start.');
+  console.log('  You can change these credentials in the .env file.');
   console.log('');
 }
 

package/src/prompts.ts

@@ -5,6 +5,7 @@ export interface Answers {
   projectName: string;
   database: "sqlite" | "postgres" | "mongodb";
   template: "minimal" | "blog" | "ecommerce" | "kitchen-sink";
+  adminEmail: string;
 }
 
 export async function promptUser(): Promise<Answers> {
@@ -73,6 +74,12 @@ export async function promptUser(): Promise<Answers> {
           },
         ],
       },
+      {
+        type: "text",
+        name: "adminEmail",
+        message: "Admin email:",
+        initial: (prev, values) => `admin@${values.projectName}.local`,
+      },
     ],
     {
       onCancel: () => {

package/test/generators.test.ts

@@ -11,6 +11,7 @@ const baseAnswers: Answers = {
   projectName: "test-project",
   database: "sqlite",
   template: "blog",
+  adminEmail: "admin@test-project.local",
 };
 
 const allDatabases = ["sqlite", "postgres", "mongodb"] as const;
@@ -38,9 +39,9 @@ describe("generators", () => {
       expect(config).toContain("MONGODB_URI");
     });
 
-    it("includes auth (always enabled)", () => {
+    it("includes auth with app secret", () => {
       const config = generateKyroConfig(baseAnswers);
-      expect(config).toContain("auth: true");
+      expect(config).toContain("APP_SECRET");
     });
 
     it("never generates mysql adapter", () => {
@@ -55,15 +56,21 @@ describe("generators", () => {
         template: "minimal",
       });
       expect(minimal).toContain("minimalCollections");
+      expect(minimal).toContain("mediaCollections");
+      expect(minimal).toContain("authCollections");
 
       const blog = generateKyroConfig({ ...baseAnswers, template: "blog" });
       expect(blog).toContain("blogCollections");
+      expect(blog).toContain("mediaCollections");
+      expect(blog).toContain("authCollections");
 
       const ecommerce = generateKyroConfig({
         ...baseAnswers,
         template: "ecommerce",
       });
       expect(ecommerce).toContain("ecommerceCollections");
+      expect(ecommerce).toContain("mediaCollections");
+      expect(ecommerce).toContain("authCollections");
 
       const kitchen = generateKyroConfig({
         ...baseAnswers,
@@ -73,6 +80,8 @@ describe("generators", () => {
       expect(kitchen).toContain("blogCollections");
       expect(kitchen).toContain("ecommerceCollections");
       expect(kitchen).toContain("kitchenSinkCollections");
+      expect(kitchen).toContain("mediaCollections");
+      expect(kitchen).toContain("authCollections");
     });
 
     it("imports settings globals per template", () => {
@@ -140,13 +149,15 @@ describe("generators", () => {
       expect(config).toContain("/api");
     });
 
-    it("never uses deprecated integrations", () => {
+    it("includes react integration for admin UI", () => {
       const config = generateAstroConfig(baseAnswers);
-      expect(config).not.toContain("@astrojs/react");
-      expect(config).not.toContain("@tailwindcss/vite");
-      expect(config).not.toContain("@astrojs/node");
-      expect(config).not.toContain("ssr");
-      expect(config).not.toContain("optimizeDeps");
+      expect(config).toContain("@astrojs/react");
+    });
+
+    it("includes tailwind vite plugin", () => {
+      const config = generateAstroConfig(baseAnswers);
+      expect(config).toContain("@tailwindcss/vite");
+      expect(config).toContain("tailwind()");
     });
   });
 
@@ -205,14 +216,24 @@ describe("generators", () => {
 
     it("never includes old dependencies", () => {
       const pkg = generatePackageJson(baseAnswers);
-      expect(pkg.dependencies["react"]).toBeUndefined();
-      expect(pkg.dependencies["react-dom"]).toBeUndefined();
+      expect(pkg.dependencies["react"]).toBeDefined();
+      expect(pkg.dependencies["react-dom"]).toBeDefined();
       expect(pkg.dependencies["lucide-react"]).toBeUndefined();
-      expect(pkg.dependencies["@astrojs/react"]).toBeUndefined();
-      expect(pkg.dependencies["tailwindcss"]).toBeUndefined();
       expect(pkg.dependencies["mysql2"]).toBeUndefined();
     });
 
+    it("includes react type definitions", () => {
+      const pkg = generatePackageJson(baseAnswers);
+      expect(pkg.devDependencies["@types/react"]).toBeDefined();
+      expect(pkg.devDependencies["@types/react-dom"]).toBeDefined();
+    });
+
+    it("includes tailwindcss and @tailwindcss/vite", () => {
+      const pkg = generatePackageJson(baseAnswers);
+      expect(pkg.dependencies["tailwindcss"]).toBeDefined();
+      expect(pkg.dependencies["@tailwindcss/vite"]).toBeDefined();
+    });
+
     it("never includes manual auth bootstrap script", () => {
       const pkg = generatePackageJson(baseAnswers);
       expect(pkg.scripts["db:bootstrap"]).toBeUndefined();

package/test/integration.test.ts

@@ -13,6 +13,7 @@ const baseAnswers: Answers = {
   projectName: "test-project",
   database: "sqlite",
   template: "blog",
+  adminEmail: "admin@test-project.local",
 };
 
 const allDatabases = ["sqlite", "postgres", "mongodb"] as const;
@@ -101,9 +102,8 @@ describe("file generation", () => {
         expect(deps).toContain("@kyro-cms/core");
         expect(deps).toContain("@kyro-cms/admin");
         expect(deps).toContain("astro");
-        // No react, no react-dom, no lucide-react
-        expect(deps).not.toContain("react");
-        expect(deps).not.toContain("react-dom");
+        expect(deps).toContain("react");
+        expect(deps).toContain("react-dom");
         expect(deps).not.toContain("lucide-react");
         expect(deps).not.toContain("mysql2");
       });
@@ -116,7 +116,7 @@ describe("file generation", () => {
         expect(config).not.toContain("mysql");
         expect(config).not.toContain("api {");
         expect(config).toContain("defineConfig");
-        expect(config).toContain("auth: true");
+        expect(config).toContain("APP_SECRET");
       });
 
       it("uses correct template import path", () => {
@@ -162,8 +162,8 @@ describe("file generation", () => {
         content = readFileSync(join(tmpDir, ".env.example"), "utf8");
       });
 
-      it("contains JWT_SECRET", () => {
-        expect(content).toContain("JWT_SECRET");
+      it("contains APP_SECRET", () => {
+        expect(content).toContain("APP_SECRET");
       });
 
       it("contains admin credentials comments", () => {
@@ -217,7 +217,7 @@ describe("all database × template combinations produce valid output", () => {
   for (const db of allDatabases) {
     for (const template of allTemplates) {
       it(`${db} + ${template} generates valid config`, () => {
-        const answers: Answers = { projectName: "combo-test", database: db, template };
+        const answers: Answers = { projectName: "combo-test", database: db, template, adminEmail: "admin@combo-test.local" };
         const config = generateKyroConfig(answers);
         expect(config).toContain("defineConfig");
         expect(config).not.toContain("mysql");