create-swift-rust 0.8.2 → 0.9.2

package/dist/index.js

@@ -93,8 +93,9 @@ ${pc.bold("Options")}
   ${pc.yellow("--js, --javascript")}      Use JavaScript
   ${pc.yellow("--tailwind")}              Install Tailwind CSS
   ${pc.yellow("--no-tailwind")}           Skip Tailwind CSS
-  ${pc.yellow("--shadcn")}                Install shadcn-style UI components (default)
-  ${pc.yellow("--no-shadcn")}             Skip shadcn UI components
+  ${pc.yellow("--swift-rust-ui")}         Install swift-rust ui components (default)
+  ${pc.yellow("--shadcn")}                Install canonical shadcn/ui components
+  ${pc.yellow("--no-ui")}                 Skip UI components
   ${pc.yellow("--src-dir")}               Use a src/ directory (src/app) (default)
   ${pc.yellow("--no-src-dir")}            Use top-level app/
   ${pc.yellow("--biome")}                 Use Biome for linting (default)
@@ -134,10 +135,12 @@ function parseFlags(args) {
             flags.tailwind = true;
         else if (a === "--no-tailwind")
             flags.tailwind = false;
+        else if (a === "--swift-rust-ui" || a === "--sr-ui")
+            flags.ui = "swift-rust-ui";
         else if (a === "--shadcn")
-            flags.useShadcn = true;
-        else if (a === "--no-shadcn")
-            flags.useShadcn = false;
+            flags.ui = "shadcn";
+        else if (a === "--no-ui" || a === "--no-shadcn")
+            flags.ui = "none";
         else if (a === "--src-dir")
             flags.srcDir = true;
         else if (a === "--no-src-dir")
@@ -266,7 +269,7 @@ async function askQuestions(flags, positional) {
             tailwind: true,
             srcDir: true,
             importAlias: "@/*",
-            useShadcn: false,
+            ui: "none",
             install,
         };
     }
@@ -344,19 +347,38 @@ async function askQuestions(flags, positional) {
         return null;
     }
     const tailwind = tailwindAnswer === true;
-    const useShadcnAnswer = typeof flags.useShadcn === "boolean"
-        ? flags.useShadcn
-        : yesMode
-            ? true
-            : ((await p.confirm({
-                message: "Would you like to use shadcn-style UI components?",
-                initialValue: true,
-            })) ?? false);
-    if (p.isCancel(useShadcnAnswer)) {
-        p.cancel("Aborted.");
-        return null;
+    // UI kit: swift-rust ui (our registry, default) · shadcn/ui · none.
+    // Only meaningful with Tailwind; without it, skip straight to "none".
+    let ui;
+    if (typeof flags.ui === "string") {
+        ui = flags.ui;
+    }
+    else if (!tailwind) {
+        ui = "none";
+    }
+    else if (yesMode) {
+        ui = "swift-rust-ui";
+    }
+    else {
+        const uiAnswer = (await p.select({
+            message: "Which component library would you like to set up?",
+            options: [
+                {
+                    value: "swift-rust-ui",
+                    label: "swift-rust ui",
+                    hint: "our shadcn-style registry — variant × size × design (3d, glass, neo…), Tailwind v4",
+                },
+                { value: "shadcn", label: "shadcn/ui", hint: "the canonical shadcn registry" },
+                { value: "none", label: "None", hint: "no components — add them later" },
+            ],
+            initialValue: "swift-rust-ui",
+        }));
+        if (p.isCancel(uiAnswer)) {
+            p.cancel("Aborted.");
+            return null;
+        }
+        ui = uiAnswer;
     }
-    const useShadcn = useShadcnAnswer === true;
     const srcDirAnswer = typeof flags.srcDir === "boolean"
         ? flags.srcDir
         : yesMode
@@ -424,19 +446,21 @@ async function askQuestions(flags, positional) {
         language,
         renderer,
         linter,
-        tailwind,
+        // A UI kit (chosen via flag) requires Tailwind, so it implies --tailwind even
+        // if Tailwind wasn't requested. The prompt path already gates ui on tailwind.
+        tailwind: tailwind || ui !== "none",
         srcDir,
         importAlias,
-        useShadcn,
+        ui,
         install,
     };
 }
 // Fallback pin used when the npm registry can't be reached at scaffold time.
 // Kept in sync with the current swift-rust release so a generated project never
 // advertises an ancient version. `^` still lets it float forward within the major.
-const SWIFT_RUST_FALLBACK = "^1.5.1";
+const SWIFT_RUST_FALLBACK = "^1.10.4";
 // Resolve the newest published swift-rust version so the scaffolded package.json
-// reflects reality (e.g. ^1.5.1) instead of a stale literal like ^1.0.0. A caret
+// reflects reality (e.g. ^1.10.4) instead of a stale literal like ^1.0.0. A caret
 // range already installs the latest matching release, but showing the real number
 // avoids the "it installed an old version" confusion. Falls back offline.
 async function resolveSwiftRustVersion() {
@@ -456,7 +480,8 @@ async function resolveSwiftRustVersion() {
     return SWIFT_RUST_FALLBACK;
 }
 async function writeProjectFiles(target, answers) {
-    const { projectName: rawName, language, renderer, linter, tailwind, srcDir, importAlias, useShadcn, } = answers;
+    const { projectName: rawName, language, renderer, linter, tailwind, srcDir, importAlias, ui, } = answers;
+    const useUi = ui !== "none";
     // When scaffolding into the current directory ("."), name the package after
     // the directory itself (like create-next-app), since "." is not a valid name.
     const projectName = rawName === "." ? basename(resolve(target)) : rawName;
@@ -469,11 +494,12 @@ async function writeProjectFiles(target, answers) {
     await mkdir(componentsDir, { recursive: true });
     await mkdir(libDir, { recursive: true });
     await mkdir(join(target, "public"), { recursive: true });
-    if (useShadcn) {
+    if (useUi) {
         await mkdir(uiDir, { recursive: true });
     }
     const fileExt = (lang) => (lang === "ts" ? "ts" : "js");
     const componentExt = (lang) => (lang === "ts" ? "tsx" : "jsx");
+    const jsxExt = componentExt(language);
     const swiftRustVersion = await resolveSwiftRustVersion();
     const pkg = {
         name: projectName,
@@ -493,14 +519,19 @@ async function writeProjectFiles(target, answers) {
             "swift-rust": swiftRustVersion,
             react: "^19.0.0",
             "react-dom": "^19.0.0",
-            ...(useShadcn
-                ? {
-                    clsx: "^2.1.1",
-                    "tailwind-merge": "^2.5.5",
-                    "class-variance-authority": "^0.7.1",
-                    "lucide-react": "^0.460.0",
-                    "tw-animate-css": "^1.0.0",
-                }
+            // Tailwind lives in dependencies (not devDependencies): the swift-rust
+            // build compiles CSS by loading @tailwindcss/postcss at build time, so it
+            // must be installed in production. As a devDependency it gets pruned on
+            // some hosts → the deployed site ships unstyled.
+            ...(tailwind
+                ? { tailwindcss: "^4.0.0", "@tailwindcss/postcss": "^4.0.0", postcss: "^8.4.0" }
+                : {}),
+            // Both kits need the cn() helper (clsx + tailwind-merge). shadcn also
+            // pulls in class-variance-authority + tw-animate-css; swift-rust ui needs
+            // neither (its components use plain class maps and v4-native animations).
+            ...(useUi ? { clsx: "^2.1.1", "tailwind-merge": "^3.6.0", "lucide-react": "^0.460.0" } : {}),
+            ...(ui === "shadcn"
+                ? { "class-variance-authority": "^0.7.1", "tw-animate-css": "^1.0.0" }
                 : {}),
         },
         devDependencies: {
@@ -508,10 +539,8 @@ async function writeProjectFiles(target, answers) {
                 ? { typescript: "^6.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0" }
                 : {}),
             ...(linter === "biome" ? { "@biomejs/biome": "^2.4.16" } : { eslint: "^9.0.0" }),
-            ...(tailwind
-                ? { tailwindcss: "^4.0.0", "@tailwindcss/postcss": "^4.0.0", postcss: "^8.4.0" }
-                : {}),
-            ...(useShadcn ? { shadcn: "^4.0.0" } : {}),
+            ...(ui === "shadcn" ? { shadcn: "^4.0.0" } : {}),
+            ...(ui === "swift-rust-ui" ? { "@swift-rust/ui": "latest" } : {}),
         },
     };
     await writeFile(join(target, "package.json"), `${JSON.stringify(pkg, null, 2)}\n`);
@@ -591,10 +620,13 @@ async function writeProjectFiles(target, answers) {
 export default config;
 `;
         await writeFile(join(target, "postcss.config.mjs"), postcss);
-        const shadcnVars = useShadcn
+        const uiTokens = useUi
             ? `
 
-/* shadcn design tokens (https://ui.shadcn.com/docs/theming) */
+/* UI design tokens — shared by swift-rust ui and shadcn/ui.
+   Components reference these via the @theme inline mapping below
+   (bg-primary, text-muted-foreground, border-border, …).
+   Retheme by editing the --ui-* values (light + .dark). */
 :root {
   --ui-bg: #ffffff;
   --ui-fg: #09090b;
@@ -689,12 +721,12 @@ export default config;
 `
             : "";
         const css = `@import "tailwindcss";
-${useShadcn ? '@import "tw-animate-css";' : ""}
+${ui === "shadcn" ? '@import "tw-animate-css";' : ""}
 
 @theme {
   --color-bg: #ffffff;
   --color-fg: #09090b;
-  --color-accent: ${useShadcn ? "#f97316" : "#0070f3"};
+  --color-accent: ${useUi ? "#f97316" : "#0070f3"};
   --font-sans: var(--font-geist-sans), system-ui, sans-serif;
   --font-mono: var(--font-geist-mono), ui-monospace, monospace;
 }
@@ -713,12 +745,11 @@ body {
   color: var(--color-fg);
   font-family: var(--font-sans);
 }
-${shadcnVars}`;
+${uiTokens}`;
         await writeFile(join(appDir, `globals.${fileExt(language)}`), language === "ts" ? `import "./globals.css";\n` : `import "./globals.css";\n`);
         await writeFile(join(appDir, "globals.css"), css);
     }
-    const layoutImports = `import type { ReactNode } from "react";
-import { Geist, GeistMono } from "swift-rust/font/google";
+    const layoutImports = `${language === "ts" ? 'import type { ReactNode } from "react";\n' : ""}import { Geist, GeistMono } from "swift-rust/font/google";
 ${tailwind ? `import "./globals.css";\n` : ""}
 const geistSans = Geist({ subsets: ["latin"], display: "swap", variable: true });
 const geistMono = GeistMono({ subsets: ["latin"], display: "swap", variable: true });
@@ -731,7 +762,7 @@ export const metadata = {
   description: "Built with swift-rust — the React framework powered with Rust + Bun. 10x faster than Next.js.",
 };
 
-export default function RootLayout({ children }: { children: ReactNode }) {
+export default function RootLayout(${language === "ts" ? "{ children }: { children: ReactNode }" : "{ children }"}) {
   return (
     <html
       lang="en"
@@ -746,10 +777,8 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   );
 }
 `;
-    await writeFile(join(appDir, `layout.${componentExt(language)}`), layoutImports);
-    const homePage = tailwind
-        ? useShadcn
-            ? `import { buttonVariants } from "@/components/ui/button";
+    await writeFile(join(appDir, `layout.${jsxExt}`), layoutImports);
+    const shadcnHome = `import { buttonVariants } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 
@@ -761,7 +790,7 @@ export default function Home() {
           <Badge variant="secondary" className="w-fit mb-2">Welcome</Badge>
           <CardTitle className="text-3xl sm:text-5xl">${projectName}</CardTitle>
           <CardDescription>
-            Get started by editing <code>${srcDir ? "src/app/" : "app/"}page.${componentExt(language)}</code>.
+            Get started by editing <code>${srcDir ? "src/app/" : "app/"}page.${jsxExt}</code>.
           </CardDescription>
         </CardHeader>
         <CardContent className="flex gap-2">
@@ -782,8 +811,77 @@ export default function Home() {
     </main>
   );
 }
-`
-            : `export default function Home() {
+`;
+    const swiftRustUiHome = `import { Button } from "@/components/ui/button";
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-bg text-fg">
+      <section className="mx-auto flex min-h-screen w-full max-w-6xl flex-col px-6 py-8">
+        <header className="flex items-center justify-between border-b border-border/70 pb-5">
+          <div>
+            <p className="text-sm font-medium text-fg/55">Swift Rust starter</p>
+            <h1 className="mt-1 text-xl font-semibold tracking-tight">${projectName}</h1>
+          </div>
+          <Button asChild size="sm" variant="outline">
+            <a href="https://swift-rust.dev/docs">Docs</a>
+          </Button>
+        </header>
+
+        <div className="grid flex-1 items-center gap-10 py-16 lg:grid-cols-[1.05fr_0.95fr]">
+          <div>
+            <div className="mb-6 inline-flex rounded-full border border-border bg-bg px-3 py-1 text-sm text-fg/65">
+              Production-ready React on Rust + Bun
+            </div>
+            <h2 className="max-w-3xl text-5xl font-semibold leading-[0.98] tracking-tight sm:text-6xl">
+              Build a fast app with a quiet, professional baseline.
+            </h2>
+            <p className="mt-6 max-w-2xl text-lg leading-8 text-fg/65">
+              Routing, rendering, styling, and deployment defaults are already wired so you can focus on the product surface.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-3">
+              <Button asChild>
+                <a href="https://swift-rust.dev/docs">Read the docs</a>
+              </Button>
+              <Button asChild variant="outline">
+                <a href="https://github.com/swift-rust/swift-rust">GitHub</a>
+              </Button>
+            </div>
+          </div>
+
+          <div className="rounded-lg border border-border bg-bg p-5 shadow-sm">
+            <div className="flex items-center justify-between border-b border-border pb-4">
+              <p className="text-sm font-medium">Project health</p>
+              <span className="rounded-full bg-accent/10 px-2.5 py-1 text-xs font-medium text-accent">
+                Ready
+              </span>
+            </div>
+            <dl className="mt-5 grid gap-4">
+              {[
+                ["Framework", "swift-rust"],
+                ["Renderer", "${renderer}"],
+                ["Styling", "Tailwind CSS"],
+                ["Components", "swift-rust ui"],
+              ].map(([label, value]) => (
+                <div key={label} className="flex items-center justify-between rounded-md border border-border/70 px-4 py-3">
+                  <dt className="text-sm text-fg/55">{label}</dt>
+                  <dd className="text-sm font-medium">{value}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+`;
+    const homePage = tailwind
+        ? ui === "shadcn"
+            ? shadcnHome
+            : ui === "swift-rust-ui"
+                ? swiftRustUiHome
+                : `export default function Home() {
   return (
     <main className="min-h-screen flex items-center justify-center px-6">
       <div className="max-w-2xl text-center">
@@ -794,7 +892,7 @@ export default function Home() {
           ${projectName}
         </h1>
         <p className="text-lg text-fg-secondary mb-8">
-          Get started by editing <code>${srcDir ? "src/app/" : "app/"}page.${componentExt(language)}</code>.
+          Get started by editing <code>${srcDir ? "src/app/" : "app/"}page.${jsxExt}</code>.
         </p>
         <a
           href="https://swift-rust.dev/docs"
@@ -812,14 +910,14 @@ export default function Home() {
     <main style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: "2rem" }}>
       <div style={{ maxWidth: "32rem", textAlign: "center" }}>
         <h1>${projectName}</h1>
-        <p>Get started by editing <code>${srcDir ? "src/app/" : "app/"}page.${componentExt(language)}</code>.</p>
+        <p>Get started by editing <code>${srcDir ? "src/app/" : "app/"}page.${jsxExt}</code>.</p>
         <a href="https://swift-rust.dev/docs">Read the docs →</a>
       </div>
     </main>
   );
 }
 `;
-    await writeFile(join(appDir, `page.${componentExt(language)}`), homePage);
+    await writeFile(join(appDir, `page.${jsxExt}`), homePage);
     const notFoundPage = tailwind
         ? `export const metadata = { title: "Not found" };
 
@@ -845,7 +943,7 @@ export default function NotFound() {
   );
 }
 `;
-    await writeFile(join(appDir, `not-found.${componentExt(language)}`), notFoundPage);
+    await writeFile(join(appDir, `not-found.${jsxExt}`), notFoundPage);
     if (linter === "biome") {
         const biome = {
             $schema: "https://biomejs.dev/schemas/2.4.16/schema.json",
@@ -892,8 +990,8 @@ Built with [swift-rust](https://swift-rust.dev) — the React framework powered
 ## Project structure
 
  ${srcDir
-        ? `\`\`\`\nsrc/\n  app/\n    layout.${componentExt(language)}\n    page.${componentExt(language)}\n    not-found.${componentExt(language)}\n  components/\n  lib/\n\`\`\``
-        : `\`\`\`\napp/\n  layout.${componentExt(language)}\n  page.${componentExt(language)}\n  not-found.${componentExt(language)}\ncomponents/\nlib/\n\`\`\``}
+        ? `\`\`\`\nsrc/\n  app/\n    layout.${jsxExt}\n    page.${jsxExt}\n    not-found.${jsxExt}\n  components/\n  lib/\n\`\`\``
+        : `\`\`\`\napp/\n  layout.${jsxExt}\n  page.${jsxExt}\n  not-found.${jsxExt}\ncomponents/\nlib/\n\`\`\``}
 
 ## Learn more
 
@@ -935,13 +1033,16 @@ For custom domains and ISR / serverless functions, see the [deploy guide](https:
     // request /favicon.ico get a real icon instead of a 404.
     const faviconIco = "AAABAAEAICAAAAEAIAAZBQAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAgAAAAIAgGAAAAc3p69AAAAAZiS0dEAP8A/wD/oL2nkwAABM5JREFUWIXFl19sU2UYxn/f6cbsoTsFoqywPw5BMzodpGNxhUIINMREgssEg5ELI7tUs/HnYiExRI1wwRKWXRBiMGEmphqykKl3JYOOBLMy3U7nthDI6LqRzii6ullit75eYJtNtnWWoU/yJc15z/s8z/f2y/ueTzEDNpttdTKZfB94FXgeWM7SYBK4BXyraVrLxMTET6mASv2wWq0HgAtKqfwlEp0TIvI78E48Hr+UNmC1Wg8opb6caegJQ0TkjXg8fknZbLbV09PTt7PZeU1NDQCXL1/OxkRM07QNStf1j4ET2TCMjIwAUFRUlE06wEc5wN5ss3Nzc7NNTWGvBqx/XJZsISIbNMA2V1DTNPr6+vD7/RiGMSdBR0cHHR0dc8YMw8Dv99PX14emaXO+o5TKnzsCJJNJotEobreb9vb2WSaUUpSXl9Pa2srFixdxOp2PiLe3t+N2u4lGoySTyflkQNd1mW85HA7p6uoSEZGWlhax2+1y7NgxiUQiMhPJ+2EJh8Ny5MgRsdvt0tLSIiIiXV1d4nA45uXXdV2Urusyv72Hu2lsbOTKlSscP34cj8dDMpmku7ubUCjEyulfeHlljDWvf4hSis7OTs6cOcPu3bs5deoUsVhsIfqFK5BadrtdOjs7RUSkp6dHqqurRdd1KXo6X26frJL3dj0rbrdbTNMUEZFAICCGYWTk1XVd5j0DM1FXV4fH46G3t5c9e/Zgmia5FsXnh9bz7Ko8+qNxent78Xq9hEIhtm/fzuHDhxdDTca/QCnFwMAAhYWFbNu2DdM0AWh6rZg69zMAlJzsZfzBNACbN2/m+vXrRCIRnE4nIgvSk7ECGzdupLi4mJs3b6bF33StSouP/PZnWhygp6eH7u5uSkpKKCsry0Q/20BNTQ2RSITR0VFGR0fx+XyUlpYCpMWrSpbTXFuSzilasYzx0y7GT7u4deIl1hq56XdLS0vx+Xxpvkgkkp4fi65AqoSaplGQn0vroefIy3k0LTEtvP3FEPdiiXTjyVR+WMQZcDqdBINBgsEgO3funBXrb3yRQvsyABouD/PZdz8DEAgEqKyspLKyksHBwQUNZKzAwMAAw8PDbNmyhU2bNqWfG09ZWGs8FPf9cD8t7nK5cLlchMPhjOKLMiAiNDc3o5Ti/Pnz2GwPR0e5w4pSYN77g/q2YQBsNhvnzp1DKcXZs2czigOLb0SBQEBEREzTlK1bt8q7u0rk3ifV8sLaFaLrung8HgmFQiIicvXq1UU3on/Vio8ePcqOHTsQEcbaPuD7X62MWdZQUVGBy+VCKcW1a9doamrC6/U+fiv+5zAyDEMaGhokHA5Lcmxw1kC6e/eu1NfXi2EYSzeM/H4/brebYDDIvn37Zu2mrKyMdevWATA0NDTrwKXGcVVVFTdu3MDr9c5bgHkNaJqGaZpEo1Fqa2vnLKXP5wPg4MGDj8QMw6CtrQ2Hw0FFRcW83wTKarXGsr0LjI2NAVBQUJBNOkBMU0rdyTZ7CXBHA77JNjuRSJBIJB7HwNf/58Vk3GKxbEhdzfYrpb7iv72a7Y/H420WgKmpqf6cnJwflVKvAHlPWHxcRN6Kx+NtAJbU06mpqf68vLwLIvIAyP97LVsi0QmgD/jUYrEcmpyc7E4F/gIrAoFO2P2bCQAAAABJRU5ErkJggg==";
     await writeFile(join(appDir, "favicon.ico"), Buffer.from(faviconIco, "base64"));
-    if (useShadcn) {
-        await scaffoldShadcn({ target, uiDir, libDir, componentExt: componentExt(language), srcDir });
+    if (ui === "shadcn") {
+        await scaffoldShadcn({ target, uiDir, libDir, componentExt: jsxExt, srcDir, language });
+    }
+    else if (ui === "swift-rust-ui") {
+        await scaffoldSwiftRustUi({ uiDir, libDir, componentExt: jsxExt, language });
     }
     await writeVscodeConfig(target);
 }
 async function scaffoldShadcn(options) {
-    const { target, uiDir, libDir, componentExt, srcDir } = options;
+    const { target, uiDir, libDir, componentExt, srcDir, language } = options;
     const utilsContent = `import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -1152,14 +1253,96 @@ export { badgeVariants };
   "iconLibrary": "lucide"
 }
 `;
-    await writeFile(join(libDir, "utils.ts"), utilsContent);
-    await writeFile(join(uiDir, `button.${componentExt}`), buttonContent);
-    await writeFile(join(uiDir, `card.${componentExt}`), cardContent);
-    await writeFile(join(uiDir, `input.${componentExt}`), inputContent);
-    await writeFile(join(uiDir, `label.${componentExt}`), labelContent);
-    await writeFile(join(uiDir, `badge.${componentExt}`), badgeContent);
+    const source = (content) => language === "js" ? stripTypeScriptForJavaScript(content) : content;
+    await writeFile(join(libDir, `utils.${language === "js" ? "js" : "ts"}`), source(utilsContent));
+    await writeFile(join(uiDir, `button.${componentExt}`), source(buttonContent));
+    await writeFile(join(uiDir, `card.${componentExt}`), source(cardContent));
+    await writeFile(join(uiDir, `input.${componentExt}`), source(inputContent));
+    await writeFile(join(uiDir, `label.${componentExt}`), source(labelContent));
+    await writeFile(join(uiDir, `badge.${componentExt}`), source(badgeContent));
     await writeFile(join(target, "components.json"), `${componentsJson}\n`);
 }
+function stripTypeScriptForJavaScript(source) {
+    return source
+        .replace(/import\s+type\s+[^;]+;\n/g, "")
+        .replace(/,\s*type\s+\w+/g, "")
+        .replace(/type\s+\w+\s*,\s*/g, "")
+        .replace(/export\s+type\s+\w+\s*=\s*[\s\S]*?;\n/g, "")
+        .replace(/export\s+interface\s+\w+[\s\S]*?\n}\n/g, "")
+        .replace(/interface\s+\w+[\s\S]*?\n}\n/g, "")
+        .replace(/React\.forwardRef<[\s\S]*?>\(/g, "React.forwardRef(")
+        .replace(/React\.createContext<[^>]+>\(/g, "React.createContext(")
+        .replace(/React\.useState<[^)]*>\(/g, "React.useState(")
+        .replace(/const\s+(\w+):\s*Record<[^=]+>\s*=/g, "const $1 =")
+        .replace(/}\s*:\s*[A-Za-z0-9_<>, |&?{}:[\]]+\s*=\s*{}\)/g, "} = {})")
+        .replace(/}\s*:\s*{[\s\S]*?}\)/g, "})")
+        .replace(/function\s+(\w+)\(([^)]*)\):\s*[\w.<>[\] |&]+/g, "function $1($2)")
+        .replace(/\(([^)]*)\):\s*[\w.<>[\] |&]+\s*=>/g, "($1) =>")
+        .replace(/(\.\.\.\w+):\s*[^,)]+/g, "$1")
+        .replace(/(\w+):\s*(string|number|boolean)\b/g, "$1")
+        .replace(/:\s*React\.[A-Za-z0-9_.<>[\], |&]+/g, "")
+        .replace(/:\s*[A-Z][A-Za-z0-9_<>, |&?]+(?=\s*[=,)])/g, "")
+        .replace(/:\s*[A-Z][A-Za-z0-9_<>, |&?{}:[\]]+(?=\s*=\s*{})/g, "")
+        .replace(/\s+as\s+React\.[A-Za-z0-9_.<>[\], |&?{}:]+/g, "")
+        .replace(/\s+as\s+Set<[^>]+>/g, "")
+        .replace(/\s+as\s+const/g, "")
+        .replace(/\s+as\s+string/g, "");
+}
+// The default component set for swift-rust ui — the components the user asked us
+// to ship first, all carrying the variant × size × design dimensions.
+const SWIFT_RUST_UI_DEFAULTS = [
+    "accordion",
+    "alert",
+    "avatar",
+    "button",
+    "card",
+    "input",
+    "label",
+];
+/** Locate the @swift-rust/ui registry: the synced copy bundled into this
+ *  package (templates/ui), or the monorepo source when running from a checkout. */
+function swiftRustUiRegistry() {
+    const here = dirname(fileURLToPath(import.meta.url));
+    const candidates = [
+        // Published: scripts/sync-template.mjs flattens the registry into templates/ui.
+        {
+            componentsDir: resolve(here, "..", "templates", "ui"),
+            utilsFile: resolve(here, "..", "templates", "ui", "utils.ts"),
+        },
+        {
+            componentsDir: resolve(here, "templates", "ui"),
+            utilsFile: resolve(here, "templates", "ui", "utils.ts"),
+        },
+        // Monorepo source: packages/create-swift-rust/dist → packages/ui/registry.
+        {
+            componentsDir: resolve(here, "..", "..", "ui", "registry", "components"),
+            utilsFile: resolve(here, "..", "..", "ui", "registry", "lib", "utils.ts"),
+        },
+    ];
+    for (const c of candidates) {
+        if (existsSync(c.componentsDir) && existsSync(c.utilsFile))
+            return c;
+    }
+    return null;
+}
+// Offline/pre-install fallback: copy the bundled registry components straight
+// in, so the project isn't empty if `@swift-rust/ui add` (the real, CLI-driven
+// path, run after install) can't be fetched. Mirrors how the shadcn path writes
+// bundled components before trying `shadcn add`.
+async function scaffoldSwiftRustUi(options) {
+    const { uiDir, libDir, componentExt, language } = options;
+    const registry = swiftRustUiRegistry();
+    if (!registry) {
+        throw new Error("swift-rust ui registry not found. Run `node scripts/sync-template.mjs` before packaging.");
+    }
+    // The cn() helper the components import from "@/lib/utils".
+    const source = (content) => language === "js" ? stripTypeScriptForJavaScript(content) : content;
+    await writeFile(join(libDir, `utils.${language === "js" ? "js" : "ts"}`), source(await readFile(registry.utilsFile, "utf8")));
+    for (const name of SWIFT_RUST_UI_DEFAULTS) {
+        const src = await readFile(join(registry.componentsDir, `${name}.tsx`), "utf8");
+        await writeFile(join(uiDir, `${name}.${componentExt}`), source(src));
+    }
+}
 async function runInstall(target) {
     const { spawn } = await import("node:child_process");
     return new Promise((resolve, reject) => {
@@ -1195,6 +1378,18 @@ async function runShadcnAdd(target, components) {
         proc.on("error", () => resolve(false));
     });
 }
+// Drive the @swift-rust/ui CLI (the same one users run as `bunx @swift-rust/ui
+// add <component>`) to install the starter components. The CLI auto-detects the
+// src/ layout, runs init (cn helper + deps), and writes into components/ui.
+async function runSwiftRustUiAdd(target, components) {
+    const { spawn } = await import("node:child_process");
+    return new Promise((resolve) => {
+        const args = ["@swift-rust/ui@latest", "add", ...components, "--yes", "--overwrite"];
+        const proc = spawn("bunx", args, { cwd: target, stdio: "pipe" });
+        proc.on("exit", (code) => resolve(code === 0));
+        proc.on("error", () => resolve(false));
+    });
+}
 async function main() {
     const args = process.argv.slice(2);
     if (args.includes("--help") || args.includes("-h")) {
@@ -1260,7 +1455,7 @@ async function main() {
             `${pc.cyan("•")} Renderer:    ${answers.renderer}`,
             `${pc.cyan("•")} Linter:      ${linter === "biome" ? "Biome" : "ESLint"}`,
             `${pc.cyan("•")} Tailwind:    ${tailwind ? "Yes" : "No"}`,
-            `${pc.cyan("•")} shadcn UI:   ${answers.useShadcn ? "Yes" : "No"}`,
+            `${pc.cyan("•")} Components:  ${answers.ui === "swift-rust-ui" ? "swift-rust ui" : answers.ui === "shadcn" ? "shadcn/ui" : "None"}`,
             `${pc.cyan("•")} src/ dir:    ${srcDir ? "Yes (src/app/)" : "No"}`,
             `${pc.cyan("•")} Import as:   ${answers.importAlias}`,
             `${pc.cyan("•")} Install:     ${install ? "Yes" : "No"}`,
@@ -1300,7 +1495,7 @@ async function main() {
                 console.error("Failed to install dependencies. Run `bun install` manually.");
             }
         }
-        if (answers.useShadcn && installSucceeded) {
+        if (answers.ui === "shadcn" && installSucceeded) {
             console.log("Fetching canonical shadcn components…");
             const ok = await runShadcnAdd(target, SHADCN_DEFAULT_COMPONENTS);
             if (ok) {
@@ -1311,6 +1506,20 @@ async function main() {
                 console.log(`${pc.yellow("!")} Could not fetch shadcn components from the registry. Using bundled shadcn-style components as a fallback. You can retry later with: ${pc.cyan(`bunx --bun shadcn@latest add ${SHADCN_DEFAULT_COMPONENTS.join(" ")} --cwd ${cwdArg}`)}`);
             }
         }
+        else if (answers.ui === "swift-rust-ui" && installSucceeded) {
+            console.log("Adding swift-rust ui components via the CLI…");
+            const ok = await runSwiftRustUiAdd(target, SWIFT_RUST_UI_DEFAULTS);
+            if (ok) {
+                console.log(`✓ Added ${SWIFT_RUST_UI_DEFAULTS.length} swift-rust ui components via ${pc.cyan("@swift-rust/ui")}`);
+            }
+            else {
+                console.log(`${pc.yellow("!")} Could not run the ${pc.cyan("@swift-rust/ui")} CLI. Using the bundled components as a fallback. Add more later with: ${pc.cyan("bunx @swift-rust/ui add <component>")}`);
+            }
+        }
+        else if (answers.ui === "swift-rust-ui") {
+            // install was skipped → the bundled components are already in place.
+            console.log(`✓ Added ${SWIFT_RUST_UI_DEFAULTS.length} swift-rust ui components (${SWIFT_RUST_UI_DEFAULTS.join(", ")}). Add more with ${pc.cyan("bunx @swift-rust/ui add <component>")}.`);
+        }
         const next = projectName === "." ? "bun run dev" : `cd ${projectName}\nbun run dev`;
         console.log(`\n${pc.green("Done!")} Next steps:\n${pc.cyan(next)}`);
     }