create-lightning-scaffold 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 create-lightning-scaffold
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# create-lightning-scaffold
+
+CLI to scaffold projects with LazorKit SDK integration. Generate React Native (Expo) or Next.js projects with passkey authentication, gasless transactions, and biometric onboarding built-in.
+
+## Quick Start
+
+```bash
+npx create-lightning-scaffold
+```
+
+## Features
+
+- 🚀 **5 Presets**: Mobile App, Web App, Full-Stack Mobile, Full-Stack Web, Monorepo
+- 🔐 **LazorKit SDK**: Passkey auth, gasless transactions, smart wallets
+- 📱 **React Native + Expo**: Official `create-expo-app` under the hood
+- 🌐 **Next.js**: Official `create-next-app` under the hood
+- 🎨 **Styling**: TailwindCSS (web) / NativeWind (mobile)
+- 📦 **State**: Zustand or Redux Toolkit
+- 🗄️ **Backend**: Supabase or Firebase integration
+- 📦 **Package Managers**: npm, pnpm, yarn, bun
+
+## Included Examples
+
+Every generated project includes 3 working LazorKit examples:
+
+1. **Passkey Login** - WebAuthn-based authentication with smart wallet
+2. **Gasless Transfer** - Send SOL without paying gas fees
+3. **Biometric Onboarding** - Mobile-first onboarding with FaceID/TouchID
+
+## Usage
+
+```bash
+# Interactive mode
+npx create-lightning-scaffold
+
+# You'll be prompted for:
+# - Project name
+# - Preset (Mobile, Web, Full-Stack, Monorepo)
+# - Customization options (styling, state, components, backend)
+# - Package manager
+```
+
+## Presets
+
+| Preset | Description | Structure |
+|--------|-------------|-----------|
+| Mobile App | React Native + Expo | Flat |
+| Web App | Next.js | Flat |
+| Full-Stack Mobile | React Native + Backend | Monorepo |
+| Full-Stack Web | Next.js + Backend | Monorepo |
+| Monorepo | Mobile + Web + Backend | Monorepo |
+
+## Configuration
+
+After scaffolding, copy `.env.example` to `.env` and add your LazorKit API key:
+
+```bash
+cp .env.example .env
+```
+
+Get your API key from [portal.lazor.sh](https://portal.lazor.sh).
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.js

@@ -0,0 +1,335 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { program } from "commander";
+import * as p2 from "@clack/prompts";
+import pc2 from "picocolors";
+import gradient from "gradient-string";
+import figlet from "figlet";
+
+// src/cli.ts
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+
+// src/utils/types.ts
+var PRESET_INFO = {
+  mobile: { label: "Mobile App", hint: "React Native + Expo", platforms: ["mobile"] },
+  web: { label: "Web App", hint: "Next.js", platforms: ["web"] },
+  "fullstack-mobile": { label: "Full-Stack Mobile", hint: "React Native + Backend", platforms: ["mobile"] },
+  "fullstack-web": { label: "Full-Stack Web", hint: "Next.js + Backend", platforms: ["web"] },
+  monorepo: { label: "Monorepo", hint: "Mobile + Web + Backend", platforms: ["mobile", "web"] }
+};
+function getCompatibleOptions(preset) {
+  const info = PRESET_INFO[preset];
+  const hasMobile = info.platforms.includes("mobile");
+  const hasWeb = info.platforms.includes("web");
+  const hasBackend = preset.includes("fullstack") || preset === "monorepo";
+  return {
+    styling: hasMobile ? ["nativewind", "none"] : ["tailwind", "none"],
+    components: hasMobile ? ["nativewind-ui", "none"] : ["shadcn", "none"],
+    backend: hasBackend ? ["supabase", "firebase"] : ["none"],
+    state: ["zustand", "redux"]
+  };
+}
+function isMonorepoPreset(preset) {
+  return preset === "fullstack-mobile" || preset === "fullstack-web" || preset === "monorepo";
+}
+
+// src/utils/helpers.ts
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+function validateProjectName(name) {
+  if (!name) return "Project name is required";
+  if (!/^[a-z0-9-_]+$/i.test(name)) return "Only letters, numbers, hyphens, and underscores allowed";
+  if (fs.existsSync(name)) return `Directory "${name}" already exists`;
+  return void 0;
+}
+function getTemplatesDir() {
+  const __dirname2 = path.dirname(fileURLToPath(import.meta.url));
+  return path.join(__dirname2, "..", "templates");
+}
+
+// src/cli.ts
+async function runPrompts() {
+  p.intro(pc.bgCyan(pc.black(" create-lightning-scaffold ")));
+  const name = await p.text({
+    message: "Project name:",
+    placeholder: "my-app",
+    validate: validateProjectName
+  });
+  if (p.isCancel(name)) return null;
+  const preset = await p.select({
+    message: "Select a preset:",
+    options: Object.entries(PRESET_INFO).map(([value, { label, hint }]) => ({
+      value,
+      label,
+      hint
+    }))
+  });
+  if (p.isCancel(preset)) return null;
+  const options = getCompatibleOptions(preset);
+  const customize = await p.confirm({
+    message: "Customize options?",
+    initialValue: false
+  });
+  if (p.isCancel(customize)) return null;
+  let styling = options.styling[0];
+  let components = options.components[0];
+  let state = "zustand";
+  let backend = options.backend[0];
+  if (customize) {
+    const stylingChoice = await p.select({
+      message: "Styling:",
+      options: options.styling.map((v) => ({ value: v, label: v === "none" ? "None" : v }))
+    });
+    if (p.isCancel(stylingChoice)) return null;
+    styling = stylingChoice;
+    const stateChoice = await p.select({
+      message: "State management:",
+      options: [
+        { value: "zustand", label: "Zustand" },
+        { value: "redux", label: "Redux Toolkit" }
+      ]
+    });
+    if (p.isCancel(stateChoice)) return null;
+    state = stateChoice;
+    const componentsChoice = await p.select({
+      message: "Component library:",
+      options: options.components.map((v) => ({ value: v, label: v === "none" ? "None" : v }))
+    });
+    if (p.isCancel(componentsChoice)) return null;
+    components = componentsChoice;
+    if (options.backend[0] !== "none") {
+      const backendChoice = await p.select({
+        message: "Backend:",
+        options: [
+          { value: "supabase", label: "Supabase" },
+          { value: "firebase", label: "Firebase" }
+        ]
+      });
+      if (p.isCancel(backendChoice)) return null;
+      backend = backendChoice;
+    }
+  }
+  const packageManager = await p.select({
+    message: "Package manager:",
+    options: [
+      { value: "npm", label: "npm" },
+      { value: "pnpm", label: "pnpm" },
+      { value: "yarn", label: "yarn" },
+      { value: "bun", label: "bun" }
+    ]
+  });
+  if (p.isCancel(packageManager)) return null;
+  const gitInit = await p.confirm({
+    message: "Initialize git repository?",
+    initialValue: true
+  });
+  if (p.isCancel(gitInit)) return null;
+  return {
+    name,
+    preset,
+    backend,
+    styling,
+    state,
+    components,
+    packageManager,
+    gitInit
+  };
+}
+
+// src/scaffolder.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+import ejs from "ejs";
+async function scaffold(config) {
+  const targetDir = path2.resolve(process.cwd(), config.name);
+  const templatesDir = getTemplatesDir();
+  const isMonorepo = isMonorepoPreset(config.preset);
+  const platforms = PRESET_INFO[config.preset].platforms;
+  await fs2.ensureDir(targetDir);
+  if (isMonorepo) {
+    await setupMonorepo(targetDir, config);
+    if (platforms.includes("mobile")) {
+      await copyTemplate(path2.join(templatesDir, "mobile"), path2.join(targetDir, "apps/mobile"), config);
+    }
+    if (platforms.includes("web")) {
+      await copyTemplate(path2.join(templatesDir, "web"), path2.join(targetDir, "apps/web"), config);
+    }
+    if (config.backend !== "none") {
+      await fs2.ensureDir(path2.join(targetDir, "packages/backend"));
+      await copyTemplate(path2.join(templatesDir, "backend", config.backend), path2.join(targetDir, "packages/backend"), config);
+    }
+  } else {
+    const platformTemplate = platforms[0] === "mobile" ? "mobile" : "web";
+    await copyTemplate(path2.join(templatesDir, platformTemplate), targetDir, config);
+  }
+  const appDir = isMonorepo ? path2.join(targetDir, platforms[0] === "mobile" ? "apps/mobile" : "apps/web") : targetDir;
+  await addStyling(appDir, config);
+  await addStateManagement(appDir, config);
+  await addComponents(appDir, config);
+  await addExamples(appDir, platforms[0], config);
+  await copyTemplate(path2.join(templatesDir, "base"), targetDir, config);
+  return targetDir;
+}
+async function setupMonorepo(targetDir, config) {
+  const pkg = {
+    name: config.name,
+    private: true,
+    scripts: {
+      dev: "echo 'Run dev in apps/*'",
+      build: "echo 'Run build in apps/*'"
+    }
+  };
+  if (config.packageManager === "pnpm") {
+    await fs2.writeFile(path2.join(targetDir, "pnpm-workspace.yaml"), "packages:\n  - 'apps/*'\n  - 'packages/*'\n");
+  } else {
+    pkg.workspaces = ["apps/*", "packages/*"];
+  }
+  await fs2.writeJson(path2.join(targetDir, "package.json"), pkg, { spaces: 2 });
+  await fs2.ensureDir(path2.join(targetDir, "apps"));
+  await fs2.ensureDir(path2.join(targetDir, "packages"));
+}
+async function addStyling(appDir, config) {
+  if (config.styling === "none") return;
+  const pkgPath = path2.join(appDir, "package.json");
+  if (!await fs2.pathExists(pkgPath)) return;
+  const pkg = await fs2.readJson(pkgPath);
+  pkg.dependencies = pkg.dependencies || {};
+  pkg.devDependencies = pkg.devDependencies || {};
+  if (config.styling === "nativewind") {
+    pkg.dependencies["nativewind"] = "^4.0.0";
+    pkg.devDependencies["tailwindcss"] = "^3.4.0";
+    const templatesDir = getTemplatesDir();
+    await copyTemplate(path2.join(templatesDir, "styling", "nativewind"), appDir, config);
+  }
+  await fs2.writeJson(pkgPath, pkg, { spaces: 2 });
+}
+async function addStateManagement(appDir, config) {
+  const pkgPath = path2.join(appDir, "package.json");
+  if (!await fs2.pathExists(pkgPath)) return;
+  const pkg = await fs2.readJson(pkgPath);
+  pkg.dependencies = pkg.dependencies || {};
+  if (config.state === "zustand") {
+    pkg.dependencies["zustand"] = "^4.5.0";
+  } else {
+    pkg.dependencies["@reduxjs/toolkit"] = "^2.0.0";
+    pkg.dependencies["react-redux"] = "^9.0.0";
+  }
+  await fs2.writeJson(pkgPath, pkg, { spaces: 2 });
+  const templatesDir = getTemplatesDir();
+  await copyTemplate(path2.join(templatesDir, "state", config.state), path2.join(appDir, "lib/store"), config);
+}
+async function addComponents(appDir, config) {
+  if (config.components === "none") return;
+  const templatesDir = getTemplatesDir();
+  await copyTemplate(path2.join(templatesDir, "components", config.components), path2.join(appDir, "components/ui"), config);
+}
+async function addExamples(appDir, platform, config) {
+  const templatesDir = getTemplatesDir();
+  const examplesDir = path2.join(templatesDir, "examples", platform);
+  const targetDir = platform === "mobile" ? path2.join(appDir, "app") : path2.join(appDir, "app/examples");
+  await copyTemplate(examplesDir, targetDir, config);
+}
+async function copyTemplate(src, dest, config) {
+  if (!await fs2.pathExists(src)) return;
+  await fs2.ensureDir(dest);
+  const files = await fs2.readdir(src, { withFileTypes: true });
+  for (const file of files) {
+    const srcPath = path2.join(src, file.name);
+    const destName = file.name.replace(/\.ejs$/, "");
+    const destPath = path2.join(dest, destName);
+    if (file.isDirectory()) {
+      await copyTemplate(srcPath, destPath, config);
+    } else if (file.name.endsWith(".ejs")) {
+      const content = await fs2.readFile(srcPath, "utf-8");
+      const rendered = ejs.render(content, config);
+      await fs2.writeFile(destPath, rendered);
+    } else {
+      await fs2.copy(srcPath, destPath);
+    }
+  }
+}
+
+// src/installer.ts
+import { spawn } from "child_process";
+function installDependencies(cwd, pm) {
+  return new Promise((resolve, reject) => {
+    const cmd = pm === "npm" ? "npm" : pm;
+    const args = pm === "yarn" ? [] : ["install"];
+    const child = spawn(cmd, args, { cwd, stdio: "inherit", shell: true });
+    child.on("close", (code) => code === 0 ? resolve() : reject(new Error(`Install failed with code ${code}`)));
+    child.on("error", reject);
+  });
+}
+function initGit(cwd) {
+  return new Promise((resolve, reject) => {
+    const child = spawn("git", ["init"], { cwd, stdio: "ignore", shell: true });
+    child.on("close", (code) => code === 0 ? resolve() : reject(new Error("Git init failed")));
+    child.on("error", reject);
+  });
+}
+
+// src/index.ts
+var showBanner = () => {
+  const art = figlet.textSync("Lightning Scaffold", { font: "Slant" });
+  console.log(gradient.cristal.multiline(art));
+  console.log();
+};
+program.name("create-lightning-scaffold").description("Scaffold projects with LazorKit SDK integration").version("1.0.0").option("-y, --yes", "Use defaults").option("-n, --name <name>", "Project name").option("-p, --preset <preset>", "Preset: mobile, web, fullstack-mobile, fullstack-web, monorepo").option("--skip-install", "Skip dependency installation").action(async (opts) => {
+  showBanner();
+  let config;
+  if (opts.yes || opts.preset) {
+    const name = opts.name || "my-lightning-app";
+    const preset = opts.preset || "mobile";
+    const isMobile = preset === "mobile" || preset === "fullstack-mobile";
+    const hasBackend = preset.includes("fullstack") || preset === "monorepo";
+    config = {
+      name,
+      preset,
+      backend: hasBackend ? "supabase" : "none",
+      styling: isMobile ? "nativewind" : "tailwind",
+      state: "zustand",
+      components: isMobile ? "nativewind-ui" : "shadcn",
+      packageManager: "npm",
+      gitInit: true
+    };
+    p2.intro(pc2.bgCyan(pc2.black(" create-lightning-scaffold ")));
+    p2.log.info(`Creating: ${name} (${preset})`);
+  } else {
+    config = await runPrompts();
+  }
+  if (!config) {
+    p2.cancel("Operation cancelled");
+    process.exit(0);
+  }
+  const s = p2.spinner();
+  s.start("Scaffolding project...");
+  try {
+    const targetDir = await scaffold(config);
+    s.stop("Project scaffolded!");
+    if (!opts.skipInstall) {
+      s.start("Installing dependencies...");
+      await installDependencies(targetDir, config.packageManager);
+      s.stop("Dependencies installed!");
+    }
+    if (config.gitInit) {
+      s.start("Initializing git...");
+      await initGit(targetDir);
+      s.stop("Git initialized!");
+    }
+    p2.outro(pc2.green("\u2713 Project created successfully!"));
+    console.log(`
+${pc2.bold("Next steps:")}`);
+    console.log(`  cd ${config.name}`);
+    console.log(`  ${config.packageManager === "npm" ? "npm run" : config.packageManager} dev
+`);
+    console.log(pc2.dim("LazorKit examples included: passkey-login, gasless-transfer, biometric-onboard"));
+  } catch (err) {
+    s.stop("Failed");
+    p2.cancel(`Error: ${err instanceof Error ? err.message : err}`);
+    process.exit(1);
+  }
+});
+program.parse();

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "create-lightning-scaffold",
+  "version": "1.0.0",
+  "description": "CLI to scaffold projects with LazorKit SDK integration",
+  "type": "module",
+  "bin": {
+    "create-lightning-scaffold": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "start": "node dist/index.js",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "commander": "^12.0.0",
+    "ejs": "^3.1.10",
+    "figlet": "^1.9.4",
+    "fs-extra": "^11.2.0",
+    "gradient-string": "^3.0.0",
+    "picocolors": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/ejs": "^3.1.5",
+    "@types/figlet": "^1.7.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/gradient-string": "^1.1.6",
+    "@types/node": "^20.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "cli",
+    "scaffold",
+    "lazorkit",
+    "react-native",
+    "nextjs",
+    "expo"
+  ],
+  "license": "MIT",
+  "author": "tobi-techy",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tobi-techy/LIGHTING-SCAFFOLD.git"
+  },
+  "homepage": "https://github.com/tobi-techy/LIGHTING-SCAFFOLD#readme"
+}

package/templates/backend/firebase/index.ts

@@ -0,0 +1,25 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore, doc, setDoc, collection, query, where, getDocs, orderBy } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: process.env.EXPO_PUBLIC_FIREBASE_API_KEY || process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN || process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.EXPO_PUBLIC_FIREBASE_PROJECT_ID || process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+};
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
+export const db = getFirestore(app);
+
+// Example: Save wallet to user profile
+export async function saveWallet(userId: string, walletAddress: string) {
+  return setDoc(doc(db, "wallets", userId), { address: walletAddress, updatedAt: new Date() });
+}
+
+// Example: Get user's transactions
+export async function getTransactions(walletAddress: string) {
+  const q = query(collection(db, "transactions"), where("walletAddress", "==", walletAddress), orderBy("createdAt", "desc"));
+  const snapshot = await getDocs(q);
+  return snapshot.docs.map((d) => ({ id: d.id, ...d.data() }));
+}

package/templates/backend/firebase/package.json.ejs

@@ -0,0 +1,8 @@
+{
+  "name": "@<%= name %>/backend",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "dependencies": {
+    "firebase": "^10.7.0"
+  }
+}

package/templates/backend/supabase/index.ts

@@ -0,0 +1,16 @@
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || "";
+const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "";
+
+export const supabase = createClient(supabaseUrl, supabaseKey);
+
+// Example: Save wallet to user profile
+export async function saveWallet(userId: string, walletAddress: string) {
+  return supabase.from("wallets").upsert({ user_id: userId, address: walletAddress });
+}
+
+// Example: Get user's transactions
+export async function getTransactions(walletAddress: string) {
+  return supabase.from("transactions").select("*").eq("wallet_address", walletAddress).order("created_at", { ascending: false });
+}

package/templates/backend/supabase/package.json.ejs

@@ -0,0 +1,8 @@
+{
+  "name": "@<%= name %>/backend",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "dependencies": {
+    "@supabase/supabase-js": "^2.39.0"
+  }
+}

package/templates/base/.env.example.ejs

@@ -0,0 +1,18 @@
+# LazorKit Configuration
+LAZORKIT_API_KEY=your_api_key_here
+LAZORKIT_PORTAL_URL=https://portal.lazor.sh
+LAZORKIT_PAYMASTER_URL=https://kora.devnet.lazorkit.com
+
+# Solana
+SOLANA_RPC=https://api.devnet.solana.com
+SOLANA_NETWORK=devnet
+<% if (backend === 'supabase') { %>
+# Supabase
+SUPABASE_URL=your_supabase_url
+SUPABASE_ANON_KEY=your_supabase_anon_key
+<% } %><% if (backend === 'firebase') { %>
+# Firebase
+FIREBASE_API_KEY=your_firebase_api_key
+FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
+FIREBASE_PROJECT_ID=your_project_id
+<% } %>

package/templates/components/nativewind-ui/button.tsx

@@ -0,0 +1,25 @@
+import { Pressable, Text, PressableProps, TextStyle, ViewStyle } from "react-native";
+
+interface ButtonProps extends PressableProps {
+  title: string;
+  variant?: "default" | "outline" | "ghost";
+}
+
+export function Button({ title, variant = "default", style, ...props }: ButtonProps) {
+  const baseStyle: ViewStyle = { paddingHorizontal: 16, paddingVertical: 12, borderRadius: 8, alignItems: "center" };
+  const variants: Record<string, ViewStyle> = {
+    default: { backgroundColor: "#6366f1" },
+    outline: { borderWidth: 1, borderColor: "#6366f1" },
+    ghost: {},
+  };
+  const textVariants: Record<string, TextStyle> = {
+    default: { color: "#fff" },
+    outline: { color: "#6366f1" },
+    ghost: { color: "#6366f1" },
+  };
+  return (
+    <Pressable style={[baseStyle, variants[variant], style as ViewStyle]} {...props}>
+      <Text style={[{ fontWeight: "600" }, textVariants[variant]]}>{title}</Text>
+    </Pressable>
+  );
+}

package/templates/components/nativewind-ui/card.tsx

@@ -0,0 +1,17 @@
+import { View, Text, ViewProps, TextProps } from "react-native";
+
+export function Card({ style, ...props }: ViewProps) {
+  return <View style={[{ borderRadius: 12, backgroundColor: "#fff", shadowColor: "#000", shadowOpacity: 0.1, shadowRadius: 4, padding: 16 }, style]} {...props} />;
+}
+
+export function CardHeader({ style, ...props }: ViewProps) {
+  return <View style={[{ marginBottom: 12 }, style]} {...props} />;
+}
+
+export function CardTitle({ style, ...props }: TextProps) {
+  return <Text style={[{ fontSize: 20, fontWeight: "600" }, style]} {...props} />;
+}
+
+export function CardContent(props: ViewProps) {
+  return <View {...props} />;
+}

package/templates/components/nativewind-ui/index.ts

@@ -0,0 +1,2 @@
+export * from "./button";
+export * from "./card";

package/templates/components/shadcn/button.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "outline" | "ghost";
+}
+
+export function Button({ className = "", variant = "default", ...props }: ButtonProps) {
+  const base = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none px-4 py-2";
+  const variants = {
+    default: "bg-primary text-primary-foreground hover:bg-primary/90",
+    outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+    ghost: "hover:bg-accent hover:text-accent-foreground",
+  };
+  return <button className={`${base} ${variants[variant]} ${className}`} {...props} />;
+}

package/templates/components/shadcn/card.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Card({ className = "", ...props }: CardProps) {
+  return <div className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`} {...props} />;
+}
+
+export function CardHeader({ className = "", ...props }: CardProps) {
+  return <div className={`flex flex-col space-y-1.5 p-6 ${className}`} {...props} />;
+}
+
+export function CardTitle({ className = "", ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={`text-2xl font-semibold leading-none tracking-tight ${className}`} {...props} />;
+}
+
+export function CardContent({ className = "", ...props }: CardProps) {
+  return <div className={`p-6 pt-0 ${className}`} {...props} />;
+}

package/templates/components/shadcn/index.ts

@@ -0,0 +1,2 @@
+export * from "./button";
+export * from "./card";