bunkit-cli 1.0.2 → 1.1.1

package/dist/index.js

@@ -11215,7 +11215,7 @@ function normalizeString(path, allowAboveRoot) {
   }
   return res;
 }
-var _DRIVE_LETTER_START_RE, _UNC_REGEX, _IS_ABSOLUTE_RE, _DRIVE_LETTER_RE, normalize = function(path) {
+var _DRIVE_LETTER_START_RE, _UNC_REGEX, _IS_ABSOLUTE_RE, _DRIVE_LETTER_RE, _ROOT_FOLDER_RE, sep = "/", delimiter = ":", normalize = function(path) {
   if (path.length === 0) {
     return ".";
   }
@@ -11280,24 +11280,95 @@ var _DRIVE_LETTER_START_RE, _UNC_REGEX, _IS_ABSOLUTE_RE, _DRIVE_LETTER_RE, norma
   return resolvedPath.length > 0 ? resolvedPath : ".";
 }, isAbsolute = function(p2) {
   return _IS_ABSOLUTE_RE.test(p2);
+}, toNamespacedPath = function(p2) {
+  return normalizeWindowsPath(p2);
+}, _EXTNAME_RE, extname = function(p2) {
+  const match = _EXTNAME_RE.exec(normalizeWindowsPath(p2));
+  return match && match[1] || "";
+}, relative = function(from, to) {
+  const _from = resolve(from).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  const _to = resolve(to).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  if (_to[0][1] === ":" && _from[0][1] === ":" && _from[0] !== _to[0]) {
+    return _to.join("/");
+  }
+  const _fromCopy = [..._from];
+  for (const segment of _fromCopy) {
+    if (_to[0] !== segment) {
+      break;
+    }
+    _from.shift();
+    _to.shift();
+  }
+  return [..._from.map(() => ".."), ..._to].join("/");
 }, dirname = function(p2) {
   const segments = normalizeWindowsPath(p2).replace(/\/$/, "").split("/").slice(0, -1);
   if (segments.length === 1 && _DRIVE_LETTER_RE.test(segments[0])) {
     segments[0] += "/";
   }
   return segments.join("/") || (isAbsolute(p2) ? "/" : ".");
+}, format = function(p2) {
+  const segments = [p2.root, p2.dir, p2.base ?? p2.name + p2.ext].filter(Boolean);
+  return normalizeWindowsPath(p2.root ? resolve(...segments) : segments.join("/"));
 }, basename = function(p2, extension) {
   const lastSegment = normalizeWindowsPath(p2).split("/").pop();
   return extension && lastSegment.endsWith(extension) ? lastSegment.slice(0, -extension.length) : lastSegment;
-};
+}, parse = function(p2) {
+  const root = normalizeWindowsPath(p2).split("/").shift() || "/";
+  const base = basename(p2);
+  const extension = extname(base);
+  return {
+    root,
+    dir: dirname(p2),
+    base,
+    ext: extension,
+    name: base.slice(0, base.length - extension.length)
+  };
+}, path;
 var init_pathe_ff20891b = __esm(() => {
   _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
   _UNC_REGEX = /^[/\\]{2}/;
   _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/;
   _DRIVE_LETTER_RE = /^[A-Za-z]:$/;
+  _ROOT_FOLDER_RE = /^\/([A-Za-z]:)?$/;
+  _EXTNAME_RE = /.(\.[^./]+)$/;
+  path = {
+    __proto__: null,
+    basename,
+    delimiter,
+    dirname,
+    extname,
+    format,
+    isAbsolute,
+    join,
+    normalize,
+    normalizeString,
+    parse,
+    relative,
+    resolve,
+    sep,
+    toNamespacedPath
+  };
 });
 
 // ../../node_modules/pathe/dist/index.mjs
+var exports_dist = {};
+__export(exports_dist, {
+  toNamespacedPath: () => toNamespacedPath,
+  sep: () => sep,
+  resolve: () => resolve,
+  relative: () => relative,
+  parse: () => parse,
+  normalizeString: () => normalizeString,
+  normalize: () => normalize,
+  join: () => join,
+  isAbsolute: () => isAbsolute,
+  format: () => format,
+  extname: () => extname,
+  dirname: () => dirname,
+  delimiter: () => delimiter,
+  default: () => path,
+  basename: () => basename
+});
 var init_dist = __esm(() => {
   init_pathe_ff20891b();
 });
@@ -18563,7 +18634,7 @@ async function isGitAvailable() {
   }
 }
 async function initGit(cwd2) {
-  await execa("git", ["init"], { cwd: cwd2 });
+  await execa("git", ["init", "--initial-branch=main"], { cwd: cwd2 });
   await execa("git", ["add", "-A"], { cwd: cwd2 });
   try {
     await execa("git", ["commit", "-m", "Initial commit from bunkit", "--no-verify"], { cwd: cwd2 });
@@ -26251,77 +26322,116 @@ var themes = {
 };
 function generateThemeCSS(theme, customRadius) {
   const radius = customRadius || theme.light.radius;
-  return `@layer base {
-  :root {
-    --radius: ${radius};
-    --background: ${theme.light.background};
-    --foreground: ${theme.light.foreground};
-    --card: ${theme.light.card};
-    --card-foreground: ${theme.light.cardForeground};
-    --popover: ${theme.light.popover};
-    --popover-foreground: ${theme.light.popoverForeground};
-    --primary: ${theme.light.primary};
-    --primary-foreground: ${theme.light.primaryForeground};
-    --secondary: ${theme.light.secondary};
-    --secondary-foreground: ${theme.light.secondaryForeground};
-    --muted: ${theme.light.muted};
-    --muted-foreground: ${theme.light.mutedForeground};
-    --accent: ${theme.light.accent};
-    --accent-foreground: ${theme.light.accentForeground};
-    --destructive: ${theme.light.destructive};
-    --destructive-foreground: ${theme.light.destructiveForeground};
-    --border: ${theme.light.border};
-    --input: ${theme.light.input};
-    --ring: ${theme.light.ring};
-    --chart-1: ${theme.light.chart1};
-    --chart-2: ${theme.light.chart2};
-    --chart-3: ${theme.light.chart3};
-    --chart-4: ${theme.light.chart4};
-    --chart-5: ${theme.light.chart5};
-    --sidebar: ${theme.light.sidebar};
-    --sidebar-foreground: ${theme.light.sidebarForeground};
-    --sidebar-primary: ${theme.light.sidebarPrimary};
-    --sidebar-primary-foreground: ${theme.light.sidebarPrimaryForeground};
-    --sidebar-accent: ${theme.light.sidebarAccent};
-    --sidebar-accent-foreground: ${theme.light.sidebarAccentForeground};
-    --sidebar-border: ${theme.light.sidebarBorder};
-    --sidebar-ring: ${theme.light.sidebarRing};
-  }
-
-  .dark {
-    --background: ${theme.dark.background};
-    --foreground: ${theme.dark.foreground};
-    --card: ${theme.dark.card};
-    --card-foreground: ${theme.dark.cardForeground};
-    --popover: ${theme.dark.popover};
-    --popover-foreground: ${theme.dark.popoverForeground};
-    --primary: ${theme.dark.primary};
-    --primary-foreground: ${theme.dark.primaryForeground};
-    --secondary: ${theme.dark.secondary};
-    --secondary-foreground: ${theme.dark.secondaryForeground};
-    --muted: ${theme.dark.muted};
-    --muted-foreground: ${theme.dark.mutedForeground};
-    --accent: ${theme.dark.accent};
-    --accent-foreground: ${theme.dark.accentForeground};
-    --destructive: ${theme.dark.destructive};
-    --destructive-foreground: ${theme.dark.destructiveForeground};
-    --border: ${theme.dark.border};
-    --input: ${theme.dark.input};
-    --ring: ${theme.dark.ring};
-    --chart-1: ${theme.dark.chart1};
-    --chart-2: ${theme.dark.chart2};
-    --chart-3: ${theme.dark.chart3};
-    --chart-4: ${theme.dark.chart4};
-    --chart-5: ${theme.dark.chart5};
-    --sidebar: ${theme.dark.sidebar};
-    --sidebar-foreground: ${theme.dark.sidebarForeground};
-    --sidebar-primary: ${theme.dark.sidebarPrimary};
-    --sidebar-primary-foreground: ${theme.dark.sidebarPrimaryForeground};
-    --sidebar-accent: ${theme.dark.sidebarAccent};
-    --sidebar-accent-foreground: ${theme.dark.sidebarAccentForeground};
-    --sidebar-border: ${theme.dark.sidebarBorder};
-    --sidebar-ring: ${theme.dark.sidebarRing};
-  }
+  return `@import "tailwindcss";
+@import "tw-animate-css";
+
+:root {
+  --radius: ${radius};
+  --background: ${theme.light.background};
+  --foreground: ${theme.light.foreground};
+  --card: ${theme.light.card};
+  --card-foreground: ${theme.light.cardForeground};
+  --popover: ${theme.light.popover};
+  --popover-foreground: ${theme.light.popoverForeground};
+  --primary: ${theme.light.primary};
+  --primary-foreground: ${theme.light.primaryForeground};
+  --secondary: ${theme.light.secondary};
+  --secondary-foreground: ${theme.light.secondaryForeground};
+  --muted: ${theme.light.muted};
+  --muted-foreground: ${theme.light.mutedForeground};
+  --accent: ${theme.light.accent};
+  --accent-foreground: ${theme.light.accentForeground};
+  --destructive: ${theme.light.destructive};
+  --destructive-foreground: ${theme.light.destructiveForeground};
+  --border: ${theme.light.border};
+  --input: ${theme.light.input};
+  --ring: ${theme.light.ring};
+  --chart-1: ${theme.light.chart1};
+  --chart-2: ${theme.light.chart2};
+  --chart-3: ${theme.light.chart3};
+  --chart-4: ${theme.light.chart4};
+  --chart-5: ${theme.light.chart5};
+  --sidebar: ${theme.light.sidebar};
+  --sidebar-foreground: ${theme.light.sidebarForeground};
+  --sidebar-primary: ${theme.light.sidebarPrimary};
+  --sidebar-primary-foreground: ${theme.light.sidebarPrimaryForeground};
+  --sidebar-accent: ${theme.light.sidebarAccent};
+  --sidebar-accent-foreground: ${theme.light.sidebarAccentForeground};
+  --sidebar-border: ${theme.light.sidebarBorder};
+  --sidebar-ring: ${theme.light.sidebarRing};
+}
+
+.dark {
+  --background: ${theme.dark.background};
+  --foreground: ${theme.dark.foreground};
+  --card: ${theme.dark.card};
+  --card-foreground: ${theme.dark.cardForeground};
+  --popover: ${theme.dark.popover};
+  --popover-foreground: ${theme.dark.popoverForeground};
+  --primary: ${theme.dark.primary};
+  --primary-foreground: ${theme.dark.primaryForeground};
+  --secondary: ${theme.dark.secondary};
+  --secondary-foreground: ${theme.dark.secondaryForeground};
+  --muted: ${theme.dark.muted};
+  --muted-foreground: ${theme.dark.mutedForeground};
+  --accent: ${theme.dark.accent};
+  --accent-foreground: ${theme.dark.accentForeground};
+  --destructive: ${theme.dark.destructive};
+  --destructive-foreground: ${theme.dark.destructiveForeground};
+  --border: ${theme.dark.border};
+  --input: ${theme.dark.input};
+  --ring: ${theme.dark.ring};
+  --chart-1: ${theme.dark.chart1};
+  --chart-2: ${theme.dark.chart2};
+  --chart-3: ${theme.dark.chart3};
+  --chart-4: ${theme.dark.chart4};
+  --chart-5: ${theme.dark.chart5};
+  --sidebar: ${theme.dark.sidebar};
+  --sidebar-foreground: ${theme.dark.sidebarForeground};
+  --sidebar-primary: ${theme.dark.sidebarPrimary};
+  --sidebar-primary-foreground: ${theme.dark.sidebarPrimaryForeground};
+  --sidebar-accent: ${theme.dark.sidebarAccent};
+  --sidebar-accent-foreground: ${theme.dark.sidebarAccentForeground};
+  --sidebar-border: ${theme.dark.sidebarBorder};
+  --sidebar-ring: ${theme.dark.sidebarRing};
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
 }
 
 @layer base {
@@ -26339,7 +26449,6 @@ function generateThemeCSS(theme, customRadius) {
 init_execa();
 init_dist();
 init_src();
-init_src();
 var DEFAULT_SHADCN_COMPONENTS = [
   "button",
   "card"
@@ -26347,50 +26456,121 @@ var DEFAULT_SHADCN_COMPONENTS = [
 async function installShadcnComponents(projectPath, components, options = {}) {
   const cwd2 = options.cwd || projectPath;
   const stdio = options.silent ? "pipe" : "inherit";
+  const targetCwd = options.isMonorepo ? join(projectPath, "packages/ui") : cwd2;
+  try {
+    logger.debug("Installing dependencies with Bun before running shadcn CLI...");
+    await execa("bun", ["install"], {
+      cwd: options.isMonorepo ? projectPath : targetCwd,
+      stdio: options.silent ? "pipe" : "inherit",
+      env: {
+        ...process.env,
+        BUN_INSTALL_LINKER: "isolated"
+      }
+    });
+  } catch (installError) {
+    logger.warn(`Failed to install dependencies with Bun: ${installError.message}`);
+  }
   try {
     await execa("bunx", ["shadcn@latest", "add", ...components], {
-      cwd: cwd2,
-      stdio
+      cwd: targetCwd,
+      stdio,
+      env: {
+        ...process.env,
+        BUN_INSTALL_LINKER: "isolated",
+        npm_config_force: "true"
+      }
     });
+    if (options.isMonorepo) {
+      await updateComponentsIndex(join(targetCwd, "src/components"));
+    }
   } catch (error) {
     try {
       await execa("npx", ["shadcn@latest", "add", ...components], {
-        cwd: cwd2,
+        cwd: targetCwd,
         stdio
       });
+      if (options.isMonorepo) {
+        await updateComponentsIndex(join(targetCwd, "src/components"));
+      }
     } catch (fallbackError) {
-      logger.warn(`Could not install shadcn components automatically. You can install them manually with: bunx shadcn@latest add ${components.join(" ")}`);
+      logger.warn(`Could not install shadcn components automatically. You can install them manually with: cd ${targetCwd} && bun install && bunx shadcn@latest add ${components.join(" ")}`);
+      throw fallbackError;
     }
   }
 }
+async function updateComponentsIndex(componentsDir) {
+  const indexPath = join(componentsDir, "index.ts");
+  const uiDir = join(componentsDir, "ui");
+  try {
+    const { existsSync } = await import("fs");
+    if (!existsSync(uiDir)) {
+      logger.debug(`UI directory does not exist: ${uiDir}`);
+      return;
+    }
+    const { readdir } = await import("fs/promises");
+    const entries = await readdir(uiDir, { withFileTypes: true });
+    const componentFiles = entries.filter((entry) => entry.isFile() && entry.name.endsWith(".tsx")).map((entry) => entry.name.replace(".tsx", "")).sort();
+    if (componentFiles.length === 0) {
+      logger.debug(`No component files found in ${uiDir}`);
+      return;
+    }
+    const exports = componentFiles.map((comp) => `export * from './ui/${comp}';`).join(`
+`);
+    const newContent = `// Auto-generated exports for shadcn/ui components
+// Components are installed via: bunkit add component --components [name]
+// Or: bunx shadcn@latest add [name] (from packages/ui directory)
+
+${exports}
+`;
+    await writeFile(indexPath, newContent);
+    logger.debug(`Updated components index with ${componentFiles.length} components`);
+  } catch (error) {
+    logger.warn(`Could not update components index file: ${error.message}`);
+  }
+}
 async function installDefaultShadcnComponents(projectPath, options = {}) {
   if (options.skipDefaults) {
     return;
   }
+  const isMonorepo = options.isMonorepo ?? (await import("fs")).existsSync((await Promise.resolve().then(() => (init_dist(), exports_dist))).join(projectPath, "packages/ui/components.json"));
   logger.step("Installing default shadcn/ui components...");
   try {
     await installShadcnComponents(projectPath, [...DEFAULT_SHADCN_COMPONENTS], {
       silent: options.silent,
-      cwd: projectPath
+      cwd: projectPath,
+      isMonorepo
     });
     logger.success("Default components installed");
   } catch (error) {
-    logger.warn("Could not install default components automatically. Install them manually with: bunx shadcn@latest add button card");
+    const manualCommand = isMonorepo ? "cd packages/ui && bunx shadcn@latest add button card" : "bunx shadcn@latest add button card";
+    logger.warn(`Could not install default components automatically. Install them manually with: ${manualCommand}`);
   }
 }
-async function createShadcnExample(projectPath, isMonorepo = false) {
+async function createShadcnExample(projectPath, isMonorepo = false, packageName) {
   const examplePath = isMonorepo ? join(projectPath, "apps/web/src/components/example.tsx") : join(projectPath, "src/components/example.tsx");
-  const exampleContent = `"use client"
-
-import { Button } from "@/components/ui/button"
-import {
+  const buttonImport = isMonorepo ? `import { Button } from "@workspace/ui/components/ui/button"` : `import { Button } from "@/components/ui/button"`;
+  const cardImport = isMonorepo ? `import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@workspace/ui/components/ui/card"` : `import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"`;
+  const importHint = isMonorepo ? `// In monorepo, components are imported from @workspace/ui package
+// This ensures all apps share the same UI components and Tailwind CSS v4 config` : `// Components are imported using the @ alias configured in tsconfig.json`;
+  const exampleContent = `"use client"
+
+${importHint}
+${buttonImport}
+${cardImport}
 
 /**
  * Example component showcasing shadcn/ui components
@@ -26410,7 +26590,7 @@ export function ExampleComponent() {
         </CardHeader>
         <CardContent>
           <p className="text-sm text-muted-foreground">
-            You can start building your UI by importing components from @/components/ui
+            ${isMonorepo ? "Components are shared via @workspace/ui package. Add more components with: bunkit add component --components [name]" : "You can start building your UI by importing components from @/components/ui"}
           </p>
         </CardContent>
         <CardFooter className="flex gap-2">
@@ -26433,9 +26613,77 @@ init_dist();
 init_src();
 async function createShadcnDocs(projectPath, isMonorepo = false, context) {
   const docsPath = isMonorepo ? join(projectPath, "packages/ui/SHADCN.md") : join(projectPath, "SHADCN.md");
+  const monorepoSection = isMonorepo ? `
+## \uD83C\uDFD7\uFE0F Bun Monorepo Setup
+
+This is a **Bun monorepo** with shared UI components in \`packages/ui\`. All shadcn/ui components are installed here and shared across all apps in the monorepo.
+
+### Monorepo Structure
+
+\`\`\`
+packages/
+  ui/                    # Shared UI package
+    src/
+      components/ui/     # shadcn/ui components
+      styles/            # Tailwind CSS v4 configuration
+      lib/utils.ts       # Utility functions (cn helper)
+    components.json      # shadcn/ui configuration
+\`\`\`
+
+### Adding Components (Monorepo)
+
+Components are installed in \`packages/ui\` and automatically shared:
+
+\`\`\`bash
+# From project root - bunkit handles monorepo detection
+bunkit add component --components button
+
+# Or directly in packages/ui directory
+cd packages/ui
+bunx shadcn@latest add button
+\`\`\`
+
+### Using Components (Monorepo)
+
+Import components using Bun workspace aliases:
+
+\`\`\`tsx
+// Recommended: Use @workspace/ui alias (Bun workspace resolution)
+import { Button } from "@workspace/ui/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/ui/card"
+
+// Or use the package name directly
+import { Button } from "@${context?.packageName || "workspace"}/ui/components/ui/button"
+\`\`\`
+
+### Tailwind CSS v4 Configuration
+
+Tailwind CSS v4 is configured in \`packages/ui/src/styles/globals.css\` using CSS-first configuration:
+- \u2705 No \`tailwind.config.ts\` needed (Tailwind v4 feature)
+- \u2705 Uses \`@theme inline\` directive for design tokens
+- \u2705 OKLCH color space (modern color format)
+- \u2705 Shared across all apps via workspace imports
+
+All apps import the CSS from the UI package:
+\`\`\`css
+/* In apps/web/src/app/globals.css */
+@import "../../../packages/ui/src/styles/globals.css";
+\`\`\`
+
+### Bun Workspace Features
+
+This setup leverages Bun 1.3 workspace features:
+- **Catalogs**: Dependency versions managed in root \`package.json\` catalog
+- **Isolated Installs**: Each package only sees its declared dependencies
+- **Workspace Aliases**: Use \`@workspace/ui\` for internal imports
+- **Fast Resolution**: Bun's native workspace resolution
+
+` : "";
   const docsContent = `# shadcn/ui Guide
 
-This project uses [shadcn/ui](https://ui.shadcn.com) - a collection of re-usable components built with Radix UI and Tailwind CSS.
+This project uses [shadcn/ui](https://ui.shadcn.com) - a collection of re-usable components built with Radix UI and Tailwind CSS v4.
+
+${monorepoSection}
 
 ## \uD83D\uDE80 Quick Start
 
@@ -26457,14 +26705,40 @@ bunkit add component --all
 Or use the official shadcn CLI directly:
 
 \`\`\`bash
-bunx shadcn@latest add button
-bunx shadcn@latest add card
-bunx shadcn@latest add input
+${isMonorepo ? "cd packages/ui && " : ""}bunx shadcn@latest add button
+${isMonorepo ? "cd packages/ui && " : ""}bunx shadcn@latest add card
+${isMonorepo ? "cd packages/ui && " : ""}bunx shadcn@latest add input
 \`\`\`
 
 ### Using Components
 
-Import components from the \`@/components/ui\` path:
+${isMonorepo ? `Import components from the \`@workspace/ui\` package:
+
+\`\`\`tsx
+import { Button } from "@workspace/ui/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/ui/card"
+
+export function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Hello</CardTitle>
+        <CardDescription>World</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Button>Click me</Button>
+      </CardContent>
+    </Card>
+  )
+}
+\`\`\`` : `Import components from the \`@/components/ui\` path:
 
 \`\`\`tsx
 import { Button } from "@/components/ui/button"
@@ -26490,7 +26764,7 @@ export function MyComponent() {
     </Card>
   )
 }
-\`\`\`
+\`\`\``}
 
 ## \uD83D\uDCDA Available Components
 
@@ -26521,20 +26795,34 @@ Your project is configured with:
 Edit the CSS variables in \`${isMonorepo ? "packages/ui/src/styles/globals.css" : "src/app/globals.css"}\`:
 
 \`\`\`css
-@layer base {
-  :root {
-    --radius: 0.625rem;
-    --background: oklch(...);
-    --foreground: oklch(...);
-    /* ... */
-  }
+/* Tailwind CSS v4 uses CSS-first configuration */
+@import "tailwindcss";
+@import "tw-animate-css";
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(...);
+  --foreground: oklch(...);
+  /* ... */
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  /* ... */
 }
 \`\`\`
 
+**Note**: Tailwind CSS v4 uses CSS-first configuration. No \`tailwind.config.ts\` is needed - all configuration is done via CSS using the \`@theme inline\` directive.
+
 ### Component Customization
 
 Components are copied directly into your project at \`${isMonorepo ? "packages/ui/src/components/ui" : "src/components/ui"}\`. You can modify them directly - they're YOUR code!
 
+${isMonorepo ? `
+**Monorepo Tip**: Since components are in \`packages/ui\`, changes automatically propagate to all apps that import them. This ensures consistent UI across your entire monorepo.
+` : ""}
+
 ## \uD83D\uDCD6 Documentation
 
 - [Official shadcn/ui Docs](https://ui.shadcn.com)
@@ -26644,119 +26932,6 @@ ${shadcnCss}`;
     }
     await writeFile(globalsCssPath, globalsCss);
   }
-  const tailwindConfigPath = join(projectPath, "tailwind.config.ts");
-  let tailwindConfig = "";
-  try {
-    tailwindConfig = await Bun.file(tailwindConfigPath).text();
-  } catch {}
-  if (tailwindConfig && !tailwindConfig.includes("hsl(var(--background))")) {
-    const shadcnTheme = `  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-    },
-  },`;
-    if (tailwindConfig.includes("theme:")) {
-      const updatedConfig = tailwindConfig.replace(/theme:\s*\{[^}]*\}/s, shadcnTheme.trim());
-      await writeFile(tailwindConfigPath, updatedConfig);
-    } else {
-      const updatedConfig = tailwindConfig.replace(/(\s*)(plugins:.*?)(\n\s*\};)/s, `$1$2$1${shadcnTheme}$3`);
-      await writeFile(tailwindConfigPath, updatedConfig);
-    }
-  } else if (!tailwindConfig) {
-    const newTailwindConfig = `import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-    },
-  },
-  plugins: [],
-};
-
-export default config;
-`;
-    await writeFile(tailwindConfigPath, newTailwindConfig);
-  }
   if (context.install !== false) {}
   await createShadcnExample(projectPath, false);
   await createShadcnDocs(projectPath, false, context);
@@ -26778,10 +26953,13 @@ async function setupShadcnMonorepo(projectPath, context) {
     main: "./src/index.ts",
     types: "./src/index.ts",
     exports: {
+      ".": "./src/index.ts",
       "./components": "./src/components/index.ts",
+      "./components/*": "./src/components/ui/*/index.ts",
       "./lib/utils": "./src/lib/utils.ts",
       "./hooks": "./src/hooks/index.ts",
-      "./styles": "./src/styles/globals.css"
+      "./styles": "./src/styles/globals.css",
+      "./components/ui/*": "./src/components/ui/*/index.ts"
     },
     dependencies: {
       "@radix-ui/react-slot": "catalog:",
@@ -26810,11 +26988,11 @@ async function setupShadcnMonorepo(projectPath, context) {
     },
     iconLibrary: "lucide",
     aliases: {
-      components: "@workspace/ui/components",
-      utils: "@workspace/ui/lib/utils",
-      hooks: "@workspace/ui/hooks",
-      lib: "@workspace/ui/lib",
-      ui: "@workspace/ui/components"
+      components: "@/components",
+      utils: "@/lib/utils",
+      hooks: "@/hooks",
+      lib: "@/lib",
+      ui: "@/components/ui"
     }
   };
   await writeFile(join(projectPath, "packages/ui/components.json"), JSON.stringify(uiComponentsJson, null, 2));
@@ -26827,9 +27005,27 @@ export function cn(...inputs: ClassValue[]) {
 `;
   await writeFile(join(projectPath, "packages/ui/src/lib/utils.ts"), uiUtilsContent);
   const uiComponentsIndex = `// Export shadcn/ui components here
-// Components will be added via: bunx shadcn@latest add [component]
+// Components are installed in src/components/ui/ and exported here
+// Add components using: bunkit add component --components button,card,input
+// Or directly: bunx shadcn@latest add [component] (from packages/ui directory)
+
+// Components will be automatically exported here when added
 `;
   await writeFile(join(projectPath, "packages/ui/src/components/index.ts"), uiComponentsIndex);
+  const uiIndexContent = `// Main entry point for @${packageName}/ui package
+// This package provides shared shadcn/ui components and Tailwind CSS v4 configuration
+
+// Export utilities
+export * from './lib/utils';
+
+// Export hooks (if any)
+export * from './hooks';
+
+// Components are exported from individual files
+// Import like: import { Button } from '@${packageName}/ui/components/ui/button'
+// Or use the re-export: import { Button } from '@workspace/ui/components/ui/button'
+`;
+  await writeFile(join(projectPath, "packages/ui/src/index.ts"), uiIndexContent);
   const uiHooksIndex = `// Export custom hooks here
 `;
   await writeFile(join(projectPath, "packages/ui/src/hooks/index.ts"), uiHooksIndex);
@@ -26850,212 +27046,81 @@ export function cn(...inputs: ClassValue[]) {
       resolveJsonModule: true,
       isolatedModules: true,
       jsx: "react-jsx",
-      types: ["react", "react-dom"]
+      types: ["react", "react-dom"],
+      paths: {
+        "@/*": ["./src/*"]
+      }
     },
     include: ["src/**/*"],
     exclude: ["node_modules"]
   };
   await writeFile(join(projectPath, "packages/ui/tsconfig.json"), JSON.stringify(uiTsconfig, null, 2));
-  await ensureDirectory(join(projectPath, "apps/web/src/components"));
-  await ensureDirectory(join(projectPath, "apps/web/src/lib"));
-  const webComponentsJson = {
-    $schema: "https://ui.shadcn.com/schema.json",
-    style,
-    rsc: true,
-    tsx: true,
-    tailwind: {
-      config: "",
-      css: "../../packages/ui/src/styles/globals.css",
-      baseColor,
-      cssVariables: true
-    },
-    iconLibrary: "lucide",
-    aliases: {
-      components: "@/components",
-      hooks: "@/hooks",
-      lib: "@/lib",
-      utils: "@workspace/ui/lib/utils",
-      ui: "@workspace/ui/components"
-    }
-  };
-  await writeFile(join(projectPath, "apps/web/components.json"), JSON.stringify(webComponentsJson, null, 2));
-  const webGlobalsCssPath = join(projectPath, "apps/web/src/app/globals.css");
-  const webGlobalsCss = `@import "../../../packages/ui/src/styles/globals.css";
-`;
-  await writeFile(webGlobalsCssPath, webGlobalsCss);
-  const webPackageJsonPath = join(projectPath, "apps/web/package.json");
-  let webPackageJson = {};
-  try {
-    webPackageJson = JSON.parse(await Bun.file(webPackageJsonPath).text());
-  } catch {}
-  if (webPackageJson.dependencies) {
-    webPackageJson.dependencies[uiPackageName] = "workspace:*";
-    await writeFile(webPackageJsonPath, JSON.stringify(webPackageJson, null, 2));
-  }
-  await ensureDirectory(join(projectPath, "apps/platform/src/components"));
-  await ensureDirectory(join(projectPath, "apps/platform/src/lib"));
-  const platformComponentsJson = {
-    $schema: "https://ui.shadcn.com/schema.json",
-    style,
-    rsc: true,
-    tsx: true,
-    tailwind: {
-      config: "",
-      css: "../../packages/ui/src/styles/globals.css",
-      baseColor,
-      cssVariables: true
-    },
-    iconLibrary: "lucide",
-    aliases: {
-      components: "@/components",
-      hooks: "@/hooks",
-      lib: "@/lib",
-      utils: "@workspace/ui/lib/utils",
-      ui: "@workspace/ui/components"
+  const configureNextJsApp = async (appName) => {
+    const appPath = join(projectPath, `apps/${appName}`);
+    if (!await directoryExists(appPath)) {
+      return;
     }
-  };
-  await writeFile(join(projectPath, "apps/platform/components.json"), JSON.stringify(platformComponentsJson, null, 2));
-  const platformGlobalsCssPath = join(projectPath, "apps/platform/src/app/globals.css");
-  const platformGlobalsCss = `@import "../../../packages/ui/src/styles/globals.css";
-`;
-  await writeFile(platformGlobalsCssPath, platformGlobalsCss);
-  const platformPackageJsonPath = join(projectPath, "apps/platform/package.json");
-  let platformPackageJson = {};
-  try {
-    platformPackageJson = JSON.parse(await Bun.file(platformPackageJsonPath).text());
-  } catch {}
-  if (platformPackageJson.dependencies) {
-    platformPackageJson.dependencies[uiPackageName] = "workspace:*";
-    await writeFile(platformPackageJsonPath, JSON.stringify(platformPackageJson, null, 2));
-  }
-  const updateAppTailwindConfig = async (appPath) => {
-    const tailwindConfigPath = join(projectPath, appPath, "tailwind.config.ts");
-    let tailwindConfig = "";
-    try {
-      tailwindConfig = await Bun.file(tailwindConfigPath).text();
-    } catch {}
-    const shadcnTheme = `  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+    await ensureDirectory(join(appPath, "src/components"));
+    await ensureDirectory(join(appPath, "src/lib"));
+    const appComponentsJson = {
+      $schema: "https://ui.shadcn.com/schema.json",
+      style,
+      rsc: true,
+      tsx: true,
+      tailwind: {
+        config: "",
+        css: "../../packages/ui/src/styles/globals.css",
+        baseColor,
+        cssVariables: true
       },
-    },
-  },`;
-    if (tailwindConfig && !tailwindConfig.includes("hsl(var(--background))")) {
-      if (tailwindConfig.includes("theme:")) {
-        const updatedConfig = tailwindConfig.replace(/theme:\s*\{[^}]*\}/s, shadcnTheme.trim());
-        await writeFile(tailwindConfigPath, updatedConfig);
-      } else {
-        const updatedConfig = tailwindConfig.replace(/(\s*)(plugins:.*?)(\n\s*\};)/s, `$1$2$1${shadcnTheme}$3`);
-        await writeFile(tailwindConfigPath, updatedConfig);
+      iconLibrary: "lucide",
+      aliases: {
+        components: "@/components",
+        hooks: "@/hooks",
+        lib: "@/lib",
+        utils: "@workspace/ui/lib/utils",
+        ui: "@workspace/ui/components/ui"
       }
-    } else if (!tailwindConfig) {
-      const newTailwindConfig = `import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-    },
-  },
-  plugins: [],
-};
-
-export default config;
+    };
+    await writeFile(join(appPath, "components.json"), JSON.stringify(appComponentsJson, null, 2));
+    const globalsCssPath = join(appPath, "src/app/globals.css");
+    const globalsCss = `@import "../../../packages/ui/src/styles/globals.css";
 `;
-      await writeFile(tailwindConfigPath, newTailwindConfig);
+    await writeFile(globalsCssPath, globalsCss);
+    const packageJsonPath = join(appPath, "package.json");
+    let packageJson = {};
+    try {
+      packageJson = JSON.parse(await Bun.file(packageJsonPath).text());
+    } catch {}
+    if (packageJson.dependencies) {
+      packageJson.dependencies[uiPackageName] = "workspace:*";
+      await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
     }
+    await createShadcnExample(appPath, true, packageName);
   };
-  await updateAppTailwindConfig("apps/web");
-  await updateAppTailwindConfig("apps/platform");
+  await configureNextJsApp("web");
+  await configureNextJsApp("platform");
+  await configureNextJsApp("app");
   const rootPackageJsonPath = join(projectPath, "package.json");
   let rootPackageJson = {};
   try {
     rootPackageJson = JSON.parse(await Bun.file(rootPackageJsonPath).text());
   } catch {}
-  if (rootPackageJson.catalog) {
-    rootPackageJson.catalog["lucide-react"] = "^0.468.0";
-    await writeFile(rootPackageJsonPath, JSON.stringify(rootPackageJson, null, 2));
-  }
-  await createShadcnExample(join(projectPath, "apps/web"), true);
-  await createShadcnExample(join(projectPath, "apps/platform"), true);
+  if (!rootPackageJson.catalog) {
+    rootPackageJson.catalog = {};
+  }
+  const shadcnDependencies = {
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    clsx: "^2.1.1",
+    "tailwind-merge": "^3.3.1",
+    "lucide-react": "^0.468.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    typescript: "^5.9.3"
+  };
+  Object.assign(rootPackageJson.catalog, shadcnDependencies);
+  await writeFile(rootPackageJsonPath, JSON.stringify(rootPackageJson, null, 2));
   await createShadcnDocs(join(projectPath, "packages/ui"), true, context);
 }
 
@@ -29926,6 +29991,7 @@ async function buildFullPreset(projectPath, context) {
   await ensureDirectory(join(projectPath, "apps/api"));
   await ensureDirectory(join(projectPath, "packages/types"));
   await ensureDirectory(join(projectPath, "packages/utils"));
+  await ensureDirectory(join(projectPath, "packages/ui"));
   if (context.database && context.database !== "none") {
     await ensureDirectory(join(projectPath, "packages/db"));
   }
@@ -30000,7 +30066,8 @@ async function buildFullPreset(projectPath, context) {
       react: "catalog:",
       "react-dom": "catalog:",
       next: "catalog:",
-      [`@${context.packageName}/types`]: "workspace:*"
+      [`@${context.packageName}/types`]: "workspace:*",
+      [`@${context.packageName}/ui`]: "workspace:*"
     },
     devDependencies: {
       "@types/react": "catalog:",
@@ -30027,7 +30094,8 @@ async function buildFullPreset(projectPath, context) {
       react: "catalog:",
       "react-dom": "catalog:",
       next: "catalog:",
-      [`@${context.packageName}/types`]: "workspace:*"
+      [`@${context.packageName}/types`]: "workspace:*",
+      [`@${context.packageName}/ui`]: "workspace:*"
     },
     devDependencies: {
       "@types/react": "catalog:",
@@ -30825,8 +30893,15 @@ networks:
   if (context.cicd) {
     await setupGitHubActions(projectPath, context);
   }
-  if (context.uiLibrary === "shadcn" && context.cssFramework === "tailwind") {
-    await setupShadcnMonorepo(projectPath, context);
+  if (context.cssFramework === "tailwind" && (context.uiLibrary === "shadcn" || context.uiLibrary === undefined)) {
+    const fullContext = {
+      ...context,
+      uiLibrary: "shadcn",
+      shadcnStyle: context.shadcnStyle || "new-york",
+      shadcnBaseColor: context.shadcnBaseColor || "zinc",
+      shadcnRadius: context.shadcnRadius || "0.625rem"
+    };
+    await setupShadcnMonorepo(projectPath, fullContext);
   }
   await setupTooling(projectPath, context);
   await setupVSCodeDebug(projectPath, context, "full");
@@ -31422,14 +31497,14 @@ async function buildEnterprisePreset(projectPath, context) {
     version: "0.0.0",
     private: true,
     scripts: {
-      dev: "next dev -p 3000",
+      dev: "next dev -p ${PORT:-3000}",
       build: "next build",
-      start: "next start -p 3000",
+      start: "next start -p ${PORT:-3000}",
       lint: "biome check .",
       format: "biome check --write .",
-      debug: "bun --inspect node_modules/.bin/next dev -p 3000",
-      "debug:brk": "bun --inspect-brk node_modules/.bin/next dev -p 3000",
-      "debug:wait": "bun --inspect-wait node_modules/.bin/next dev -p 3000"
+      debug: "bun --inspect node_modules/.bin/next dev -p ${PORT:-3000}",
+      "debug:brk": "bun --inspect-brk node_modules/.bin/next dev -p ${PORT:-3000}",
+      "debug:wait": "bun --inspect-wait node_modules/.bin/next dev -p ${PORT:-3000}"
     },
     dependencies: {
       react: "catalog:",
@@ -31453,14 +31528,14 @@ async function buildEnterprisePreset(projectPath, context) {
     version: "0.0.0",
     private: true,
     scripts: {
-      dev: "next dev -p 3001",
+      dev: "next dev -p ${PORT:-3001}",
       build: "next build",
-      start: "next start -p 3001",
+      start: "next start -p ${PORT:-3001}",
       lint: "biome check .",
       format: "biome check --write .",
-      debug: "bun --inspect node_modules/.bin/next dev -p 3001",
-      "debug:brk": "bun --inspect-brk node_modules/.bin/next dev -p 3001",
-      "debug:wait": "bun --inspect-wait node_modules/.bin/next dev -p 3001"
+      debug: "bun --inspect node_modules/.bin/next dev -p ${PORT:-3001}",
+      "debug:brk": "bun --inspect-brk node_modules/.bin/next dev -p ${PORT:-3001}",
+      "debug:wait": "bun --inspect-wait node_modules/.bin/next dev -p ${PORT:-3001}"
     },
     dependencies: {
       react: "catalog:",
@@ -31485,14 +31560,14 @@ async function buildEnterprisePreset(projectPath, context) {
     version: "0.0.0",
     private: true,
     scripts: {
-      dev: "next dev -p 3002",
+      dev: "next dev -p ${PORT:-3002}",
       build: "next build",
-      start: "next start -p 3002",
+      start: "next start -p ${PORT:-3002}",
       lint: "biome check .",
       format: "biome check --write .",
-      debug: "bun --inspect node_modules/.bin/next dev -p 3002",
-      "debug:brk": "bun --inspect-brk node_modules/.bin/next dev -p 3002",
-      "debug:wait": "bun --inspect-wait node_modules/.bin/next dev -p 3002"
+      debug: "bun --inspect node_modules/.bin/next dev -p ${PORT:-3002}",
+      "debug:brk": "bun --inspect-brk node_modules/.bin/next dev -p ${PORT:-3002}",
+      "debug:wait": "bun --inspect-wait node_modules/.bin/next dev -p ${PORT:-3002}"
     },
     dependencies: {
       react: "catalog:",
@@ -31566,11 +31641,63 @@ async function buildEnterprisePreset(projectPath, context) {
   if (context.cicd) {
     await setupGitHubActions(projectPath, context);
   }
-  if (context.uiLibrary === "shadcn") {
-    await setupShadcnMonorepo(projectPath, context);
+  if (context.cssFramework === "tailwind" && (context.uiLibrary === "shadcn" || context.uiLibrary === undefined)) {
+    const enterpriseContext = {
+      ...context,
+      uiLibrary: "shadcn",
+      shadcnStyle: context.shadcnStyle || "new-york",
+      shadcnBaseColor: context.shadcnBaseColor || "zinc",
+      shadcnRadius: context.shadcnRadius || "0.625rem"
+    };
+    await setupShadcnMonorepo(projectPath, enterpriseContext);
   }
   await setupTooling(projectPath, context);
   await setupVSCodeDebug(projectPath, context);
+  const typesPackageJson = {
+    name: `@${context.packageName}/types`,
+    version: "0.0.0",
+    private: true,
+    main: "./src/index.ts",
+    types: "./src/index.ts"
+  };
+  await writeFile(join(projectPath, "packages/types/package.json"), JSON.stringify(typesPackageJson, null, 2));
+  const typesContent = `// Shared types for ${context.projectName}
+
+export interface User {
+  id: string;
+  email: string;
+  name?: string;
+  createdAt: Date;
+}
+
+export interface ApiResponse<T = unknown> {
+  data?: T;
+  error?: string;
+  message?: string;
+}
+`;
+  await ensureDirectory(join(projectPath, "packages/types/src"));
+  await writeFile(join(projectPath, "packages/types/src/index.ts"), typesContent);
+  const utilsPackageJson = {
+    name: `@${context.packageName}/utils`,
+    version: "0.0.0",
+    private: true,
+    main: "./src/index.ts",
+    types: "./src/index.ts"
+  };
+  await writeFile(join(projectPath, "packages/utils/package.json"), JSON.stringify(utilsPackageJson, null, 2));
+  const utilsContent = `// Shared utilities for ${context.projectName}
+
+export function formatDate(date: Date): string {
+  return date.toISOString();
+}
+
+export function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+`;
+  await ensureDirectory(join(projectPath, "packages/utils/src"));
+  await writeFile(join(projectPath, "packages/utils/src/index.ts"), utilsContent);
   await ensureDirectory(join(projectPath, "apps/service-identity/src/routes"));
   await ensureDirectory(join(projectPath, "apps/service-identity/src/middleware"));
   const serviceIdentityIndex = `import { Hono } from 'hono';
@@ -31701,10 +31828,14 @@ bun install
 bun dev
 
 # Start individual apps
-bun run dev:web         # Start marketing site
-bun run dev:app         # Start main product app
-bun run dev:platform    # Start admin dashboard
-bun run dev:identity    # Start identity service
+bun run dev:web         # Start marketing site (port 3000)
+bun run dev:app         # Start main product app (port 3002)
+bun run dev:platform    # Start admin dashboard (port 3001)
+bun run dev:identity    # Start identity service (port 3003)
+
+# Use custom ports if defaults are in use
+PORT=3004 bun run dev:app    # Run app on port 3004
+PORT=3005 bun run dev:web    # Run web on port 3005
 
 # Build all apps
 bun build
@@ -31714,6 +31845,26 @@ bun lint
 bun format
 \`\`\`
 
+### Port Configuration
+
+All apps support the \`PORT\` environment variable to override the default port:
+
+- **apps/web**: Default port 3000
+- **apps/platform**: Default port 3001  
+- **apps/app**: Default port 3002
+- **apps/service-identity**: Default port 3003
+
+If a port is already in use, you can easily change it:
+
+\`\`\`bash
+# Example: Run app on a different port
+PORT=4000 cd apps/app && bun dev
+
+# Or set it globally for the session
+export PORT=4000
+cd apps/app && bun dev
+\`\`\`
+
 ## Adding More Services
 
 You can easily add more services using bunkit:
@@ -32720,6 +32871,69 @@ async function createCommand2(preset, name, options) {
   }
   console.log("");
   const s = Y2();
+  const isEnterprise = normalizedPreset === "enterprise-monorepo";
+  let shadcnStyle = "new-york";
+  let shadcnBaseColor = "zinc";
+  let shadcnRadius = "0.625rem";
+  if (isEnterprise) {
+    Me(`Default theme: ${source_default.cyan("New York")} style, ${source_default.cyan("Zinc")} color, ${source_default.cyan("0.625rem")} radius`, "shadcn/ui defaults");
+    const customize = await ye({
+      message: `\uD83C\uDFA8 Customize shadcn/ui theme?`,
+      initialValue: false
+    });
+    if (pD(customize)) {
+      xe("Operation cancelled.");
+      process.exit(0);
+    }
+    if (customize) {
+      const styleChoice = await ve({
+        message: "\uD83C\uDFA8 Component style",
+        options: [
+          { value: "new-york", label: "New York (Recommended)", hint: "Modern, rounded, subtle shadows" },
+          { value: "default", label: "Default", hint: "Classic, sharper edges, higher contrast" }
+        ],
+        initialValue: "new-york"
+      });
+      if (pD(styleChoice)) {
+        xe("Operation cancelled.");
+        process.exit(0);
+      }
+      shadcnStyle = styleChoice;
+      const colorChoice = await ve({
+        message: "\uD83C\uDFA8 Base color theme",
+        options: [
+          { value: "zinc", label: "Zinc (Recommended)", hint: "Neutral gray - versatile, modern" },
+          { value: "neutral", label: "Neutral", hint: "Pure neutral - no color cast" },
+          { value: "gray", label: "Gray", hint: "Warm gray palette" },
+          { value: "slate", label: "Slate", hint: "Cool gray - bluer tone" },
+          { value: "stone", label: "Stone", hint: "Warm beige-gray - earthy feel" }
+        ],
+        initialValue: "zinc"
+      });
+      if (pD(colorChoice)) {
+        xe("Operation cancelled.");
+        process.exit(0);
+      }
+      shadcnBaseColor = colorChoice;
+      const radiusInput = await he({
+        message: "\uD83D\uDCD0 Border radius",
+        placeholder: "0.625rem",
+        initialValue: "0.625rem",
+        validate: (value) => {
+          if (!value.trim())
+            return "Radius cannot be empty";
+          if (!/^\d+(\.\d+)?(rem|px|em|%)$/.test(value.trim())) {
+            return "Please enter a valid CSS value (e.g., 0.5rem, 8px)";
+          }
+        }
+      });
+      if (pD(radiusInput)) {
+        xe("Operation cancelled.");
+        process.exit(0);
+      }
+      shadcnRadius = radiusInput;
+    }
+  }
   s.start(`${source_default.cyan("\uD83D\uDD28")} Creating ${preset} project: ${source_default.bold(name)}`);
   try {
     const config = {
@@ -32731,13 +32945,18 @@ async function createCommand2(preset, name, options) {
       database: "none",
       redis: false,
       useBunSecrets: false,
-      codeQuality: "ultracite",
+      codeQuality: isEnterprise ? "biome" : "ultracite",
       tsStrictness: "strict",
       testing: "bun-test",
       docker: false,
       cicd: false,
       envExample: true,
-      pathAliases: true
+      pathAliases: true,
+      cssFramework: isEnterprise ? "tailwind" : undefined,
+      uiLibrary: isEnterprise ? "shadcn" : undefined,
+      shadcnStyle: isEnterprise ? shadcnStyle : undefined,
+      shadcnBaseColor: isEnterprise ? shadcnBaseColor : undefined,
+      shadcnRadius: isEnterprise ? shadcnRadius : undefined
     };
     s.message(`${source_default.cyan("\uD83D\uDCC1")} Creating project structure...`);
     await createProject(config);
@@ -32771,6 +32990,26 @@ async function createCommand2(preset, name, options) {
         break;
     }
     s.message(`${source_default.cyan("\u2728")} Finalizing setup...`);
+    if (config.install !== false) {
+      s.message(`${source_default.cyan("\uD83D\uDCE6")} Installing dependencies...`);
+      try {
+        await installDependencies(projectPath);
+      } catch (error) {
+        s.message(`${source_default.yellow("\u26A0\uFE0F")} Dependency installation had issues, but continuing...`);
+      }
+    }
+    if (isEnterprise && config.uiLibrary === "shadcn" && config.install !== false) {
+      s.message(`${source_default.cyan("\uD83E\uDDE9")} Installing default shadcn/ui components...`);
+      try {
+        await installDefaultShadcnComponents(projectPath, {
+          silent: false,
+          skipDefaults: false
+        });
+      } catch (error) {
+        s.message(`${source_default.yellow("\u26A0\uFE0F")} Could not install default components automatically`);
+        s.message(`${source_default.dim("   You can install them manually:")} ${source_default.cyan("cd packages/ui && bun install && bunx shadcn@latest add button card")}`);
+      }
+    }
     s.stop(`${source_default.green("\u2705")} Project ${source_default.bold(name)} created successfully!`);
     const getPresetEmoji = () => {
       switch (normalizedPreset) {
@@ -33268,6 +33507,20 @@ ${import_picocolors5.default.bold("Package info:")}
 // src/commands/add/component.ts
 init_dist();
 import { existsSync } from "fs";
+async function getPackageName(cwd2) {
+  try {
+    const packageJsonPath = join(cwd2, "package.json");
+    if (existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(await Bun.file(packageJsonPath).text());
+      const name = packageJson.name;
+      if (name && name.endsWith("-monorepo")) {
+        return name.replace("-monorepo", "");
+      }
+      return name || null;
+    }
+  } catch {}
+  return null;
+}
 async function addComponentCommand(options = {}) {
   const cwd2 = options.cwd || process.cwd();
   const spinner = Y2();
@@ -33279,6 +33532,12 @@ async function addComponentCommand(options = {}) {
     process.exit(1);
   }
   const targetPath = isMonorepo ? join(cwd2, "packages/ui") : cwd2;
+  const targetComponentsJson = join(targetPath, "components.json");
+  if (!existsSync(targetComponentsJson)) {
+    M2.error(`shadcn/ui is not configured in ${isMonorepo ? "packages/ui" : "this project"}.`);
+    M2.info("Run `bunkit init` with --ui-library shadcn to set up shadcn/ui first.");
+    process.exit(1);
+  }
   let components = [];
   if (options.all) {
     const popularComponents = [
@@ -33364,12 +33623,16 @@ async function addComponentCommand(options = {}) {
   try {
     await installShadcnComponents(targetPath, components, {
       silent: false,
-      cwd: targetPath
+      cwd: cwd2,
+      isMonorepo
     });
     spinner.stop(`\u2705 Installed: ${components.join(", ")}`);
     if (isMonorepo) {
+      const packageName = await getPackageName(cwd2);
       Me(`Components installed in packages/ui. Import them using:
-import { Button } from "@workspace/ui/components/ui/button"`, "Usage");
+` + `import { Button } from "@workspace/ui/components/ui/button"
+` + `// Or using workspace alias:
+` + `import { Button } from "${packageName ? `@${packageName}/ui` : "@workspace/ui"}/components/ui/button"`, "Usage");
     } else {
       Me(`Import components using:
 import { Button } from "@/components/ui/button"`, "Usage");