create-pollar-app-patrickkish 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Patrick Kish
+
+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,50 @@
+# create-pollar-app-patrickkish
+
+CLI that scaffolds a ready-to-run **Next.js 16 + Pollar** app. Closes [pollar-backoffice#2](https://github.com/pollar-xyz/pollar-backoffice/issues/2).
+
+## Usage
+
+```bash
+# Interactive (pnpm recommended)
+pnpm dlx create-pollar-app-patrickkish my-app
+
+# Non-interactive
+npx create-pollar-app-patrickkish my-app --yes --pm pnpm --network testnet
+npm create create-pollar-app-patrickkish@latest my-app -- --yes --pm npm
+yarn create create-pollar-app-patrickkish my-app --yes --pm yarn
+bunx create-pollar-app-patrickkish my-app --yes --pm bun
+```
+
+### Flags
+
+| Flag | Description |
+|------|-------------|
+| `--yes` / `-y` | Skip prompts (defaults: detected package manager, testnet) |
+| `--pm <npm\|pnpm\|yarn\|bun>` | Package manager for install |
+| `--network <testnet\|mainnet>` | Stellar network written to `.env.local` |
+
+When you run via `pnpm dlx`, the default package manager is **pnpm**. Same for `npm create`, `yarn create`, and `bunx`.
+
+## Generated app
+
+- `PollarProvider` + `NEXT_PUBLIC_POLLAR_API_KEY`
+- Login with **WalletButton**
+- Home screen opens SDK modals: balance, assets, send (USDC example), receive, history
+- eslint + prettier, README with Deploy to Vercel button
+
+## Develop this CLI
+
+```bash
+pnpm install
+node bin/index.js my-test-app --yes --pm pnpm
+```
+
+## Publish
+
+```bash
+npm publish --access public
+```
+
+## License
+
+MIT

package/bin/index.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+import { createApp } from "../lib/create.js";
+
+const args = process.argv.slice(2);
+
+/** @type {import("../lib/create.js").CreateOptions} */
+const options = {
+  projectName: undefined,
+  packageManager: undefined,
+  network: undefined,
+  yes: false,
+};
+
+for (let i = 0; i < args.length; i += 1) {
+  const arg = args[i];
+  if (arg === "--yes" || arg === "-y") {
+    options.yes = true;
+    continue;
+  }
+  if (arg === "--pm" && args[i + 1]) {
+    options.packageManager = args[++i];
+    continue;
+  }
+  if (arg === "--network" && args[i + 1]) {
+    options.network = args[++i];
+    continue;
+  }
+  if (arg.startsWith("-")) {
+    console.error(`Unknown flag: ${arg}`);
+    process.exit(1);
+  }
+  if (!options.projectName) {
+    options.projectName = arg;
+  }
+}
+
+createApp(options).catch((error) => {
+  console.error(error instanceof Error ? error.message : error);
+  process.exit(1);
+});

package/lib/copy-template.js

@@ -0,0 +1,34 @@
+import { cp, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+const SKIP = new Set(["node_modules", ".next", ".git"]);
+
+/**
+ * @param {string} source
+ * @param {string} target
+ * @param {{ projectName: string; network: string }} vars
+ */
+export async function copyTemplate(source, target, vars) {
+  await cp(source, target, {
+    recursive: true,
+    filter: (src) => {
+      const base = path.basename(src);
+      return !SKIP.has(base);
+    },
+  });
+
+  const pkgPath = path.join(target, "package.json");
+  const pkgRaw = await readFile(pkgPath, "utf8");
+  await writeFile(
+    pkgPath,
+    pkgRaw.replaceAll("{{PROJECT_NAME}}", vars.projectName),
+  );
+
+  const envExamplePath = path.join(target, ".env.example");
+  const envExample = await readFile(envExamplePath, "utf8");
+  const envLocal = envExample.replace(
+    "NEXT_PUBLIC_POLLAR_NETWORK=testnet",
+    `NEXT_PUBLIC_POLLAR_NETWORK=${vars.network}`,
+  );
+  await writeFile(path.join(target, ".env.local"), envLocal);
+}

package/lib/create.js

@@ -0,0 +1,140 @@
+import { cp, mkdir, readFile, writeFile } from "node:fs/promises";
+import { spawn } from "node:child_process";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import prompts from "prompts";
+import { detectPackageManager, installCommand, runCommand } from "./package-manager.js";
+import { copyTemplate } from "./copy-template.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = path.join(__dirname, "..", "template");
+
+const PACKAGE_MANAGERS = ["pnpm", "npm", "yarn", "bun"];
+const NETWORKS = ["testnet", "mainnet"];
+
+/**
+ * @typedef {Object} CreateOptions
+ * @property {string | undefined} projectName
+ * @property {string | undefined} packageManager
+ * @property {string | undefined} network
+ * @property {boolean} yes
+ */
+
+/**
+ * @param {CreateOptions} options
+ */
+export async function createApp(options) {
+  const detectedPm = detectPackageManager();
+
+  let projectName = options.projectName;
+  let packageManager = options.packageManager ?? (options.yes ? detectedPm : undefined);
+  let network = options.network ?? (options.yes ? "testnet" : undefined);
+
+  if (!options.yes) {
+    const response = await prompts(
+      [
+        {
+          type: projectName ? null : "text",
+          name: "projectName",
+          message: "Project name",
+          initial: "my-pollar-app",
+          validate: (value) =>
+            /^[a-z0-9-_]+$/i.test(value.trim()) || "Use letters, numbers, hyphens, or underscores",
+        },
+        {
+          type: packageManager ? null : "select",
+          name: "packageManager",
+          message: "Package manager",
+          choices: PACKAGE_MANAGERS.map((pm) => ({
+            title: pm + (pm === "pnpm" ? " (recommended)" : ""),
+            value: pm,
+          })),
+          initial: Math.max(0, PACKAGE_MANAGERS.indexOf(detectedPm)),
+        },
+        {
+          type: network ? null : "select",
+          name: "network",
+          message: "Stellar network",
+          choices: NETWORKS.map((value) => ({ title: value, value })),
+          initial: 0,
+        },
+      ],
+      {
+        onCancel: () => {
+          console.log("\nCancelled.");
+          process.exit(0);
+        },
+      },
+    );
+
+    projectName = projectName ?? response.projectName;
+    packageManager = packageManager ?? response.packageManager;
+    network = network ?? response.network;
+  }
+
+  projectName = (projectName ?? "my-pollar-app").trim();
+  packageManager = packageManager ?? detectedPm;
+  network = network ?? "testnet";
+
+  if (!PACKAGE_MANAGERS.includes(packageManager)) {
+    throw new Error(`Unsupported package manager: ${packageManager}`);
+  }
+  if (!NETWORKS.includes(network)) {
+    throw new Error(`Unsupported network: ${network}`);
+  }
+
+  const targetDir = path.resolve(process.cwd(), projectName);
+
+  console.log(`\nCreating Pollar app in ${targetDir}\n`);
+
+  await mkdir(targetDir, { recursive: false }).catch((error) => {
+    if (error && typeof error === "object" && "code" in error && error.code === "EEXIST") {
+      throw new Error(`Directory already exists: ${targetDir}`);
+    }
+    throw error;
+  });
+
+  await copyTemplate(TEMPLATE_DIR, targetDir, {
+    projectName,
+    network,
+  });
+
+  console.log(`Installing dependencies with ${packageManager}…`);
+  await runCommand(installCommand(packageManager), targetDir);
+
+  console.log("Initializing git repository…");
+  await runCommand("git init", targetDir);
+  await runCommand("git branch -M main", targetDir).catch(() => undefined);
+  await runCommand("git add .", targetDir);
+  await runCommand('git commit -m "Initial commit from create-pollar-app-patrickkish"', targetDir).catch(
+    () => undefined,
+  );
+
+  console.log(`
+Success! Created ${projectName}
+
+Next steps:
+  cd ${projectName}
+  Set your Pollar API key in .env.local:
+    NEXT_PUBLIC_POLLAR_API_KEY=pub_testnet_...
+  Get a key at https://dashboard.pollar.xyz
+
+  ${devCommand(packageManager)}
+
+Open http://localhost:3000 — log in with WalletButton and try Send USDC from the home screen.
+`);
+}
+
+/** @param {string} pm */
+function devCommand(pm) {
+  switch (pm) {
+    case "pnpm":
+      return "pnpm dev";
+    case "yarn":
+      return "yarn dev";
+    case "bun":
+      return "bun run dev";
+    default:
+      return "npm run dev";
+  }
+}

package/lib/package-manager.js

@@ -0,0 +1,43 @@
+import { spawn } from "node:child_process";
+
+/** @returns {"pnpm" | "npm" | "yarn" | "bun"} */
+export function detectPackageManager() {
+  const userAgent = process.env.npm_config_user_agent ?? "";
+  if (userAgent.startsWith("pnpm")) return "pnpm";
+  if (userAgent.startsWith("yarn")) return "yarn";
+  if (userAgent.startsWith("bun")) return "bun";
+  return "npm";
+}
+
+/** @param {string} pm */
+export function installCommand(pm) {
+  switch (pm) {
+    case "pnpm":
+      return "pnpm install";
+    case "yarn":
+      return "yarn install";
+    case "bun":
+      return "bun install";
+    default:
+      return "npm install";
+  }
+}
+
+/**
+ * @param {string} command
+ * @param {string} cwd
+ */
+export function runCommand(command, cwd) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, {
+      cwd,
+      stdio: "inherit",
+      shell: true,
+    });
+    child.on("error", reject);
+    child.on("close", (code) => {
+      if (code === 0) resolve(undefined);
+      else reject(new Error(`Command failed (${code}): ${command}`));
+    });
+  });
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "create-pollar-app-patrickkish",
+  "version": "0.1.0",
+  "description": "Scaffold a Next.js app with Pollar wallet pre-wired",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "pnpm@10.28.2",
+  "bin": {
+    "create-pollar-app-patrickkish": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "template"
+  ],
+  "scripts": {
+    "test:cli": "node bin/index.js test-app --yes --pm pnpm --network testnet"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2"
+  }
+}

package/template/.env.example

@@ -0,0 +1,5 @@
+# Pollar SDK — get your key at https://dashboard.pollar.xyz
+NEXT_PUBLIC_POLLAR_API_KEY=pub_testnet_xxxxxxxxxxxxxxxxxxxx
+
+# Stellar network: testnet (default) or mainnet
+NEXT_PUBLIC_POLLAR_NETWORK=testnet

package/template/.prettierignore

@@ -0,0 +1,6 @@
+.next
+node_modules
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+bun.lock

package/template/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100
+}

package/template/README.md

@@ -0,0 +1,38 @@
+# Pollar App
+
+A Next.js app scaffolded with [create-pollar-app-patrickkish](https://github.com/PatrickKish1/create-pollar-app-patrickkish). Pollar wallet login, send, receive, balance, assets, and history are provided by the official SDK.
+
+## Get started in 3 steps
+
+1. **Set your API key** — copy `.env.local` and paste your testnet key from [dashboard.pollar.xyz](https://dashboard.pollar.xyz):
+
+   ```bash
+   NEXT_PUBLIC_POLLAR_API_KEY=pub_testnet_...
+   ```
+
+2. **Install and run:**
+
+   ```bash
+   pnpm install   # or npm / yarn / bun
+   pnpm dev
+   ```
+
+3. **Open** [http://localhost:3000](http://localhost:3000) — log in with **WalletButton**, then use **Send USDC** on the home screen.
+
+## Deploy to Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new?env=NEXT_PUBLIC_POLLAR_API_KEY,NEXT_PUBLIC_POLLAR_NETWORK&envDescription=Pollar%20publishable%20key%20and%20Stellar%20network&project-name=pollar-app)
+
+After deploy, set `NEXT_PUBLIC_POLLAR_API_KEY` in Vercel project settings.
+
+## Stack
+
+- Next.js 16 (App Router), React 19, TypeScript, Tailwind 4
+- `@pollar/core@^0.9.0`, `@pollar/react@^0.9.0`
+
+## Environment
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `NEXT_PUBLIC_POLLAR_API_KEY` | Yes | Pollar publishable key (`pub_testnet_...`) |
+| `NEXT_PUBLIC_POLLAR_NETWORK` | No | `testnet` (default) or `mainnet` |

package/template/app/components/LoginPage.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { WalletButton } from "@pollar/react";
+
+const keyConfigured =
+  !!process.env.NEXT_PUBLIC_POLLAR_API_KEY &&
+  !process.env.NEXT_PUBLIC_POLLAR_API_KEY.includes("xxxx");
+
+export function LoginPage() {
+  return (
+    <main className="mx-auto flex w-full max-w-md flex-1 flex-col items-center justify-center gap-8 px-6 py-16 text-center">
+      <div className="flex flex-col gap-3">
+        <span className="inline-flex w-fit self-center rounded-full bg-brand-tint px-3 py-1 text-xs font-medium text-brand">
+          Powered by Pollar
+        </span>
+        <h1 className="text-4xl font-bold tracking-tight">
+          <span className="text-brand">Pollar</span> Wallet
+        </h1>
+        <p className="text-base leading-7 text-zinc-500">
+          Log in to send, receive, and manage assets on Stellar. Login providers are configured in
+          your Pollar dashboard.
+        </p>
+      </div>
+
+      <div className="flex w-full flex-col items-center gap-3">
+        <WalletButton />
+        {!keyConfigured && (
+          <p className="rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900">
+            Set <code className="font-mono">NEXT_PUBLIC_POLLAR_API_KEY</code> in{" "}
+            <code className="font-mono">.env.local</code> from{" "}
+            <a
+              href="https://dashboard.pollar.xyz"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium underline"
+            >
+              dashboard.pollar.xyz
+            </a>{" "}
+            and restart the dev server.
+          </p>
+        )}
+      </div>
+    </main>
+  );
+}

package/template/app/components/WalletHome.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { WalletButton, usePollar } from "@pollar/react";
+
+type ActionId = "balance" | "assets" | "send" | "receive" | "history";
+
+const ACTIONS: {
+  id: ActionId;
+  title: string;
+  description: string;
+  highlight?: boolean;
+}[] = [
+  {
+    id: "balance",
+    title: "Balance",
+    description: "View native and token balances",
+  },
+  {
+    id: "assets",
+    title: "Assets",
+    description: "Manage trustlines and enabled assets",
+  },
+  {
+    id: "send",
+    title: "Send USDC",
+    description: "Send USDC or any enabled asset on testnet",
+    highlight: true,
+  },
+  {
+    id: "receive",
+    title: "Receive",
+    description: "Share your address and QR code",
+  },
+  {
+    id: "history",
+    title: "History",
+    description: "Browse past transactions",
+  },
+];
+
+function shortenAddress(address: string) {
+  if (address.length <= 12) return address;
+  return `${address.slice(0, 6)}…${address.slice(-4)}`;
+}
+
+export function WalletHome() {
+  const {
+    walletAddress,
+    openWalletBalanceModal,
+    openEnabledAssetsModal,
+    openSendModal,
+    openReceiveModal,
+    openTxHistoryModal,
+  } = usePollar();
+
+  const handlers: Record<ActionId, () => void> = {
+    balance: openWalletBalanceModal,
+    assets: openEnabledAssetsModal,
+    send: openSendModal,
+    receive: openReceiveModal,
+    history: openTxHistoryModal,
+  };
+
+  return (
+    <div className="flex w-full flex-1 flex-col">
+      <header className="flex items-center justify-between border-b border-zinc-200 px-6 py-4">
+        <div>
+          <p className="text-sm font-semibold text-zinc-900">Pollar Wallet</p>
+          {walletAddress && (
+            <p className="font-mono text-xs text-zinc-500">{shortenAddress(walletAddress)}</p>
+          )}
+        </div>
+        <WalletButton />
+      </header>
+
+      <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-8 px-6 py-10">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Your wallet</h1>
+          <p className="mt-2 text-zinc-500">
+            All actions below use Pollar&apos;s native SDK modals — no custom send/receive UI.
+          </p>
+        </div>
+
+        <ul className="grid gap-4 sm:grid-cols-2">
+          {ACTIONS.map((action) => (
+            <li key={action.id}>
+              <button
+                type="button"
+                onClick={handlers[action.id]}
+                className={`flex h-full w-full flex-col items-start gap-2 rounded-2xl border px-5 py-4 text-left transition-colors hover:border-brand hover:bg-brand-tint/40 ${
+                  action.highlight
+                    ? "border-brand bg-brand-tint/30"
+                    : "border-zinc-200 bg-white"
+                }`}
+              >
+                <span className="text-base font-semibold text-zinc-900">{action.title}</span>
+                <span className="text-sm leading-6 text-zinc-500">{action.description}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </main>
+    </div>
+  );
+}

package/template/app/globals.css

@@ -0,0 +1,29 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-brand: #0560a9;
+  --color-brand-dark: #044a82;
+  --color-brand-tint: #e7f0f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans), system-ui, sans-serif;
+}

package/template/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Providers } from "./providers";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Pollar App",
+  description: "Next.js app with Pollar wallet — send, receive, and manage assets on Stellar.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="flex min-h-full flex-col">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/template/app/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { usePollar } from "@pollar/react";
+import { LoginPage } from "./components/LoginPage";
+import { WalletHome } from "./components/WalletHome";
+
+export default function Home() {
+  const { isAuthenticated } = usePollar();
+
+  return (
+    <div className="flex flex-1 flex-col bg-white text-zinc-900">
+      {isAuthenticated ? <WalletHome /> : <LoginPage />}
+    </div>
+  );
+}

package/template/app/providers.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState, useSyncExternalStore, type ReactNode } from "react";
+import { PollarProvider, type PollarConfig } from "@pollar/react";
+import type { PollarClientConfig, StellarNetwork } from "@pollar/core";
+import "@pollar/react/styles.css";
+
+const apiKey = process.env.NEXT_PUBLIC_POLLAR_API_KEY ?? "";
+const stellarNetwork =
+  (process.env.NEXT_PUBLIC_POLLAR_NETWORK as StellarNetwork | undefined) ?? "testnet";
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [clientConfig] = useState<PollarClientConfig>(() => ({
+    apiKey,
+    stellarNetwork,
+  }));
+
+  const isClient = useSyncExternalStore(
+    () => () => {},
+    () => true,
+    () => false,
+  );
+
+  if (!isClient) {
+    return <div className="flex min-h-screen items-center justify-center bg-white" />;
+  }
+
+  const appConfig: PollarConfig = {
+    application: { name: "Pollar App" },
+    styles: {
+      accentColor: "#0560a9",
+      emailEnabled: true,
+      embeddedWallets: true,
+      smartWallet: true,
+    },
+  };
+
+  return (
+    <PollarProvider client={clientConfig} appConfig={appConfig}>
+      {children}
+    </PollarProvider>
+  );
+}

package/template/eslint.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+import prettier from "eslint-config-prettier";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  prettier,
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+]);
+
+export default eslintConfig;

package/template/next.config.ts

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

package/template/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint . && prettier --check .",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@pollar/core": "^0.9.0",
+    "@pollar/react": "^0.9.0",
+    "next": "16.2.9",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.9",
+    "eslint-config-prettier": "^10.1.5",
+    "prettier": "^3.6.2",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/template/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

package/template/tsconfig.json

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