@pauldvlp/vp-react-ts-shadcn 0.3.1

package/README.md

@@ -0,0 +1,79 @@
+# @pauldvlp/vp-react-ts-shadcn
+
+A [Vite+](https://viteplus.dev) **monorepo generator** that scaffolds a minimal front-end workspace:
+
+- `apps/website` — a React + Vite+ app (Tailwind v4, React Compiler)
+- `packages/ui` — a shared **shadcn** design system consumed by the app
+
+It's a [Bingo](https://create.bingo) template, so options can be passed on the `vp create` command
+line (anything after `--`) and the **shadcn theme is materialized at create time** from the preset
+you choose.
+
+## Usage
+
+Published under the [`@pauldvlp/create`](../create) manifest:
+
+```bash
+# Interactive (prompts for anything you don't pass)
+vp create @pauldvlp:react-ts-shadcn
+
+# Non-interactive, fully specified
+vp create @pauldvlp:react-ts-shadcn -- \
+  --name my-app --scope @acme --base base --preset vega --iconLibrary lucide --components button,card,dialog
+```
+
+> Only **string/enum** options parse reliably as `vp create -- --flag value`. **Boolean** options
+> (`--cssVariables`, `--rtl`, `--pointer`, `--install`) are best left to the interactive prompt —
+> Bingo's CLI does not accept `--no-x` / `--x=false` cleanly. Omit them and answer the prompt.
+
+## Options
+
+| Option          | Type / values                                              | Default        | Notes                                                                                   |
+| --------------- | ---------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------- |
+| `--name`        | string                                                     | `my-app`       | Root project / package name.                                                            |
+| `--scope`       | string                                                     | `@<name>`      | npm scope for workspace packages → `@scope/website`, `@scope/ui`. Defaults to the project name prefixed with `@` (e.g. `--name acme` → `@acme`); falls back to `@app`. |
+| `--base`        | `radix` \| `base`                                          | `radix`        | shadcn component library (radix-ui or @base-ui). Honored by `shadcn init --base`.       |
+| `--preset`      | style name or code                                         | `b30557okNu`   | A style (`nova`, `vega`, `maia`, `lyra`, `mira`, `luma`, `sera`, `rhea`) **or** a code from ui.shadcn.com. **Owns** color, fonts, radius, baseColor, menu styling. |
+| `--iconLibrary` | `lucide` \| `hugeicons` \| `radix` \| `tabler`             | `hugeicons`    | Icon library (persists; not part of the preset).                                        |
+| `--cssVariables`| boolean                                                    | `true`         | CSS variables for theming.                                                              |
+| `--rtl`         | boolean                                                    | `false`        | RTL support.                                                                             |
+| `--pointer`     | boolean                                                    | `false`        | Pointer cursor on interactive elements.                                                 |
+| `--components`  | comma list                                                 | `button,badge` | shadcn components to pre-install. `button` + `badge` are always included.               |
+| `--install`     | boolean                                                    | `true`         | Run install + apply the shadcn theme after scaffolding. `false` = files only.           |
+
+### What the preset controls vs. what you control
+
+shadcn presets are **authoritative for the theme**: `--preset` sets the `style`, `baseColor`, accent
+color, fonts, radius and menu styling. Generate one at <https://ui.shadcn.com> (theme editor →
+copy the preset code) and pass it as `--preset <code>`. Independent of the preset you still pick
+`--base` (radix-ui vs @base-ui), `--iconLibrary`, `--rtl`, `--pointer`, and `--cssVariables`.
+
+## How it scaffolds
+
+`produce()` emits the monorepo skeleton (workspace, Vite+/TS config, the website shell, and a UI
+package with a **minimal** `globals.css` so Tailwind v4 is detectable), then runs:
+
+```bash
+pnpm install
+pnpm --filter <scope>/ui exec shadcn init --base <base> --preset <preset> ... --no-reinstall -y -f
+pnpm --filter <scope>/ui exec shadcn add button badge <extra> -y
+```
+
+shadcn `init` fills the theme tokens into `globals.css` and creates `lib/utils.ts`; `add` writes
+components into `src/components/ui/`. The UI package `exports` (`./components/* → ./src/components/*.tsx`)
+resolves them as `@scope/ui/components/ui/<name>`, which is how the starter `App.tsx` imports them.
+
+## Re-theme later
+
+```bash
+pnpm --filter @scope/ui exec shadcn init --preset <new-code> --no-reinstall -y -f
+pnpm --filter @scope/ui exec shadcn add <component>
+```
+
+## Develop the generator
+
+```bash
+pnpm install
+node bin/index.ts --help            # list options
+node bin/index.ts --directory /tmp/demo --name demo --scope @demo --base base --preset vega
+```

package/dist/index.js

@@ -0,0 +1,204 @@
+#!/usr/bin/env node
+
+// bin/index.ts
+import { runTemplateCLI } from "bingo";
+
+// src/template.ts
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createTemplate } from "bingo";
+import { z } from "zod";
+
+// package.json
+var package_default = {
+  name: "@pauldvlp/vp-react-ts-shadcn",
+  version: "0.3.1",
+  description: "Vite+ monorepo template: one frontend app (website) + a shared shadcn UI package, themeable via shadcn presets.",
+  keywords: [
+    "vite-plus-generator",
+    "vite-plus",
+    "shadcn",
+    "react",
+    "template"
+  ],
+  bin: "./dist/index.js",
+  type: "module",
+  files: [
+    "dist",
+    "template"
+  ],
+  scripts: {
+    build: "esbuild bin/index.ts --bundle --outfile=dist/index.js --format=esm --platform=node --target=node22 --packages=external",
+    dev: "node bin/index.ts",
+    prepack: "pnpm run build"
+  },
+  dependencies: {
+    bingo: "^0.9.3",
+    zod: "^3.25.76"
+  },
+  devDependencies: {
+    "@types/node": "^24",
+    esbuild: "^0.25.0",
+    typescript: "^5"
+  },
+  engines: {
+    node: ">=22.18.0"
+  }
+};
+
+// src/template.ts
+var TEMPLATE_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), "..", "template");
+var RENAME = {
+  _gitignore: ".gitignore"
+};
+var DEFAULT_PRESET = "b30557okNu";
+var ICON_LIBS = {
+  hugeicons: { "@hugeicons/react": "^1.1.9", "@hugeicons/core-free-icons": "^4.2.1" },
+  lucide: { "lucide-react": "^0" },
+  radix: { "@radix-ui/react-icons": "^1" },
+  tabler: { "@tabler/icons-react": "^3" }
+};
+function toScope(name) {
+  const n = name.trim();
+  return n.startsWith("@") ? n : `@${n}`;
+}
+function readTree(dir, transform, base = dir) {
+  const out = {};
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const abs = path.join(dir, entry.name);
+    const name = RENAME[entry.name] ?? entry.name;
+    if (entry.isDirectory()) {
+      out[name] = readTree(abs, transform, base);
+    } else {
+      const rel = path.relative(base, abs);
+      out[name] = transform(rel, fs.readFileSync(abs, "utf8"));
+    }
+  }
+  return out;
+}
+function setPath(tree, relPath, content) {
+  const parts = relPath.split("/");
+  let node = tree;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const key = parts[i];
+    if (typeof node[key] !== "object") node[key] = {};
+    node = node[key];
+  }
+  node[parts[parts.length - 1]] = content;
+}
+function patchJson(tree, relPath, mutate) {
+  const parts = relPath.split("/");
+  let node = tree;
+  for (let i = 0; i < parts.length - 1; i++) node = node[parts[i]];
+  const key = parts[parts.length - 1];
+  const json = JSON.parse(node[key]);
+  mutate(json);
+  node[key] = `${JSON.stringify(json, null, 2)}
+`;
+}
+var template_default = createTemplate({
+  about: {
+    name: package_default.name,
+    description: package_default.description
+  },
+  options: {
+    name: z.string().describe("Root project / package name").default("my-app"),
+    scope: z.string().describe("npm scope for workspace packages, e.g. @acme (defaults to @<name>)"),
+    base: z.enum(["radix", "base"]).describe("shadcn component library base (radix-ui or @base-ui)").default("radix"),
+    preset: z.string().describe("shadcn preset: a style name (nova, vega, maia, lyra, mira, luma, sera, rhea) or a code from ui.shadcn.com").default(DEFAULT_PRESET),
+    iconLibrary: z.enum(["lucide", "hugeicons", "radix", "tabler"]).describe("Icon library").default("hugeicons"),
+    cssVariables: z.boolean().describe("Use CSS variables for theming").default(true),
+    rtl: z.boolean().describe("Enable RTL support").default(false),
+    pointer: z.boolean().describe("Use pointer cursor on interactive elements").default(false),
+    components: z.string().describe("Comma-separated shadcn components to pre-install, e.g. button,card,dialog").default("button,badge"),
+    install: z.boolean().describe("Install deps and apply the shadcn theme after scaffolding").default(true)
+  },
+  // Lazily default the package scope to `@<name>` (prefixing `@` unless the name already has one),
+  // so it tracks the project name instead of a fixed value. Falls back to `@app` when no name is set.
+  prepare({ options }) {
+    return {
+      scope: () => options.name ? toScope(options.name) : "@app"
+    };
+  },
+  async produce({ options }) {
+    const scope = toScope(options.scope || options.name || "app");
+    const files = readTree(
+      TEMPLATE_DIR,
+      (_rel, content) => content.split("@app").join(scope).split("__PROJECT_NAME__").join(options.name)
+    );
+    const uiComponentsJson = {
+      $schema: "https://ui.shadcn.com/schema.json",
+      style: `${options.base}-nova`,
+      rsc: false,
+      tsx: true,
+      tailwind: { config: "", css: "./src/styles/globals.css", baseColor: "neutral", cssVariables: options.cssVariables },
+      iconLibrary: options.iconLibrary,
+      rtl: options.rtl,
+      base: options.base,
+      aliases: {
+        components: `${scope}/ui/components`,
+        ui: `${scope}/ui/components`,
+        lib: `${scope}/ui/lib`,
+        utils: `${scope}/ui/lib/utils`,
+        hooks: `${scope}/ui/hooks`
+      }
+    };
+    const websiteComponentsJson = {
+      $schema: "https://ui.shadcn.com/schema.json",
+      style: `${options.base}-nova`,
+      rsc: false,
+      tsx: true,
+      tailwind: { config: "", css: "../../packages/ui/src/styles/globals.css", baseColor: "neutral", cssVariables: options.cssVariables },
+      iconLibrary: options.iconLibrary,
+      rtl: options.rtl,
+      aliases: {
+        components: "@/components",
+        hooks: "@/hooks",
+        lib: "@/lib",
+        utils: `${scope}/ui/lib/utils`,
+        ui: `${scope}/ui/components`
+      }
+    };
+    setPath(files, "packages/ui/components.json", `${JSON.stringify(uiComponentsJson, null, 2)}
+`);
+    setPath(files, "apps/website/components.json", `${JSON.stringify(websiteComponentsJson, null, 2)}
+`);
+    const iconDeps = ICON_LIBS[options.iconLibrary] ?? ICON_LIBS.hugeicons;
+    for (const rel of ["packages/ui/package.json", "apps/website/package.json"]) {
+      patchJson(files, rel, (pkg) => {
+        pkg.dependencies = { ...pkg.dependencies, ...iconDeps };
+      });
+    }
+    const requested = options.components.split(",").map((c) => c.trim()).filter(Boolean);
+    const adds = Array.from(/* @__PURE__ */ new Set(["button", "badge", ...requested]));
+    const ui = `${scope}/ui`;
+    const initFlags = [
+      `--base ${options.base}`,
+      `--preset ${options.preset}`,
+      options.cssVariables ? "--css-variables" : "--no-css-variables",
+      options.rtl ? "--rtl" : "--no-rtl",
+      options.pointer ? "--pointer" : "--no-pointer",
+      "--no-reinstall",
+      "-y",
+      "-f"
+    ].join(" ");
+    const scripts = options.install ? [
+      { commands: ["pnpm install --silent"], phase: 0 },
+      { commands: [`pnpm --filter ${ui} exec shadcn init ${initFlags}`], phase: 1 },
+      { commands: [`pnpm --filter ${ui} exec shadcn add ${adds.join(" ")} -y`], phase: 2 }
+    ] : [];
+    return {
+      files,
+      scripts,
+      suggestions: [
+        `cd into the project and run \`vp run ${scope}/website#dev\` to start the app.`,
+        options.install ? `Theme applied via shadcn preset "${options.preset}". Re-theme any time: \`pnpm --filter ${ui} exec shadcn init --preset <code> --no-reinstall -y -f\`.` : `Skipped install. Run \`vp install\`, then \`pnpm --filter ${ui} exec shadcn init --preset ${options.preset} --no-reinstall -y -f\` and \`shadcn add ${adds.join(" ")}\`.`,
+        `Add more components later: \`pnpm --filter ${ui} exec shadcn add <name>\`.`
+      ]
+    };
+  }
+});
+
+// bin/index.ts
+process.exitCode = await runTemplateCLI(template_default);

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@pauldvlp/vp-react-ts-shadcn",
+  "version": "0.3.1",
+  "description": "Vite+ monorepo template: one frontend app (website) + a shared shadcn UI package, themeable via shadcn presets.",
+  "keywords": [
+    "vite-plus-generator",
+    "vite-plus",
+    "shadcn",
+    "react",
+    "template"
+  ],
+  "type": "module",
+  "files": [
+    "dist",
+    "template"
+  ],
+  "dependencies": {
+    "bingo": "^0.9.3",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@types/node": "^24",
+    "esbuild": "^0.25.0",
+    "typescript": "^5"
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "scripts": {
+    "build": "esbuild bin/index.ts --bundle --outfile=dist/index.js --format=esm --platform=node --target=node22 --packages=external",
+    "dev": "node bin/index.ts"
+  },
+  "bin": {
+    "vp-react-ts-shadcn": "./dist/index.js"
+  }
+}

package/template/README.md

@@ -0,0 +1,82 @@
+# @app/website
+
+Monorepo mínimo basado en [Vite+](https://viteplus.dev): **una app frontend** + un **paquete de UI shadcn compartido**.
+
+```
+.
+├── apps/
+│   └── website        # @app/website — app React + Vite+ (Tailwind v4, React Compiler)
+└── packages/
+    └── ui             # @app/ui — design system shadcn (Tailwind v4)
+```
+
+## Requisitos
+
+- Node `>=22.18.0`
+- pnpm `11.9.0` (se descarga solo vía `devEngines`)
+- CLI `vp` (Vite+) instalado globalmente
+
+## Empezar
+
+```bash
+vp install                # si aún no se instaló al crear el proyecto
+vp run @app/website#dev   # o: pnpm dev
+```
+
+## Scripts (raíz)
+
+| Script                | Qué hace                                          |
+| --------------------- | ------------------------------------------------- |
+| `vp dev` / `pnpm dev` | Levanta `@app/website` en modo dev                |
+| `vp check`            | Formatea, lintea y type-checkea todo el workspace |
+| `vp run -r build`     | Buildea todos los paquetes                        |
+| `pnpm ready`          | `vp check` + build (pensado para CI)              |
+
+## Cómo está cableado
+
+- **`packages/ui`** publica sus fuentes vía `exports` (sin paso de build):
+  - `@app/ui/globals.css` — Tailwind v4 + tokens del tema (generados por shadcn)
+  - `@app/ui/components/*` → `src/components/*.tsx` — shadcn escribe en `src/components/ui/`, así que los componentes se importan como `@app/ui/components/ui/<nombre>`
+  - `@app/ui/lib/*` — utilidades (`cn`)
+  - `@app/ui/hooks/*` — hooks
+- **`apps/website`** consume `@app/ui` como `workspace:*` e importa `@app/ui/globals.css` en `main.tsx`.
+- Tailwind escanea las fuentes de la app y de `ui` vía las directivas `@source` en `globals.css`.
+
+## Iconos
+
+La librería de iconos (la que elegiste con `--iconLibrary`) está declarada como dependencia tanto
+en `packages/ui` como en `apps/website`, así que **puedes usar iconos directamente en el website**:
+
+```tsx
+// hugeicons (por defecto)
+import { Home01Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+
+<HugeiconsIcon icon={Home01Icon} />
+```
+
+```tsx
+// lucide → import { Home } from 'lucide-react'
+// tabler → import { IconHome } from '@tabler/icons-react'
+// radix  → import { HomeIcon } from '@radix-ui/react-icons'
+```
+
+> Se importan **directamente** del paquete de iconos (no re-exportados desde `@app/ui`): los named
+> imports son tree-shakeables y evitan inflar el grafo de módulos.
+
+## Añadir componentes shadcn
+
+Desde la raíz, contra el paquete `ui`:
+
+```bash
+pnpm --filter @app/ui exec shadcn add <componente>
+```
+
+## Cambiar el tema (preset shadcn)
+
+El tema (color, fuentes, radius, baseColor) lo define un **preset de shadcn**. Genera uno en
+<https://ui.shadcn.com> (copia el preset code) y reaplícalo:
+
+```bash
+pnpm --filter @app/ui exec shadcn init --preset <code> --no-reinstall -y -f
+```

package/template/_gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# AI agent worktrees
+.claude/worktrees/

package/template/apps/website/_gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/template/apps/website/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>website</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/apps/website/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@app/website",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev",
+    "build": "tsc -b && vp build",
+    "lint": "vp lint",
+    "preview": "vp preview"
+  },
+  "dependencies": {
+    "@app/ui": "workspace:*",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "devDependencies": {
+    "@rolldown/plugin-babel": "catalog:",
+    "@tailwindcss/vite": "^4",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "tailwindcss": "^4",
+    "typescript": "~6.0.2",
+    "vite": "catalog:",
+    "vite-plus": "catalog:"
+  }
+}

package/template/apps/website/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="7" fill="#0b0b0b" />
+  <path d="M9 10l4.5 12h2L20 10h-2.6l-2.9 8.3L11.6 10z" fill="#e3d000" />
+</svg>

package/template/apps/website/src/App.tsx

@@ -0,0 +1,11 @@
+import { Badge } from '@app/ui/components/ui/badge'
+import { Button } from '@app/ui/components/ui/button'
+
+export const App = () => {
+  return (
+    <main className='h-screen grid justify-items-center content-center gap-4'>
+      <Badge variant='secondary'>Vite+ template</Badge>
+      <Button>Website</Button>
+    </main>
+  )
+}

package/template/apps/website/src/main.tsx

@@ -0,0 +1,10 @@
+import '@app/ui/globals.css'
+import { App } from '@app/website/App'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/template/apps/website/tsconfig.app.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite-plus/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Aliases */
+    "paths": {
+      "@app/website/*": ["./src/*"],
+      "@app/ui/*": ["../../packages/ui/src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/template/apps/website/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/template/apps/website/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/apps/website/vite.config.ts

@@ -0,0 +1,38 @@
+import babel from '@rolldown/plugin-babel'
+import tailwindcss from '@tailwindcss/vite'
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import { fileURLToPath, URL } from 'url'
+import { defineConfig, lazyPlugins } from 'vite-plus'
+
+// https://vite.dev/config/
+export default defineConfig({
+  lint: {
+    plugins: ['react', 'typescript', 'oxc'],
+    rules: {
+      'react/rules-of-hooks': 'error',
+      'react/only-export-components': [
+        'warn',
+        {
+          allowConstantExport: true
+        }
+      ],
+      'vite-plus/prefer-vite-plus-imports': 'error'
+    },
+    options: {
+      typeAware: true,
+      typeCheck: true
+    },
+    jsPlugins: [
+      {
+        name: 'vite-plus',
+        specifier: 'vite-plus/oxlint-plugin'
+      }
+    ]
+  },
+  plugins: lazyPlugins(() => [react(), tailwindcss(), babel({ presets: [reactCompilerPreset()] })]),
+  resolve: {
+    alias: {
+      '@app/website': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})

package/template/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vp run @app/website#dev",
+    "build": "vp run -r build",
+    "check": "vp check",
+    "ready": "vp check && vp run -r build"
+  },
+  "devDependencies": {
+    "babel-plugin-react-compiler": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "version": "11.9.0",
+      "onFail": "download"
+    }
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  }
+}

package/template/packages/ui/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@app/ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  },
+  "scripts": {
+    "lint": "vp lint",
+    "check": "vp check"
+  },
+  "dependencies": {
+    "@fontsource-variable/outfit": "^5.2.8",
+    "@fontsource-variable/space-grotesk": "^5.2.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "shadcn": "^4.11.0",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwindcss": "^4",
+    "typescript": "~6.0.2",
+    "vite": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}

package/template/packages/ui/src/styles/globals.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+@source "../../../../apps/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";

package/template/packages/ui/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "types": ["vite-plus/client"],
+    "skipLibCheck": true,
+    "strict": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "paths": {
+      "@app/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/template/packages/ui/vite.config.ts

@@ -0,0 +1,31 @@
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import { defineConfig, lazyPlugins } from 'vite-plus'
+
+// https://vite.dev/config/
+export default defineConfig({
+  lint: {
+    plugins: ['react', 'typescript', 'oxc'],
+    rules: {
+      'react/rules-of-hooks': 'error',
+      'react/only-export-components': [
+        'warn',
+        {
+          allowConstantExport: true
+        }
+      ],
+      'vite-plus/prefer-vite-plus-imports': 'error'
+    },
+    options: {
+      typeAware: true,
+      typeCheck: true
+    },
+    jsPlugins: [
+      {
+        name: 'vite-plus',
+        specifier: 'vite-plus/oxlint-plugin'
+      }
+    ]
+  },
+  plugins: lazyPlugins(() => [react(), tailwindcss()])
+})

package/template/pnpm-workspace.yaml

@@ -0,0 +1,28 @@
+packages:
+  - apps/*
+  - packages/*
+
+catalogMode: prefer
+
+catalog:
+  '@types/node': ^24
+  typescript: ^5
+  vite: npm:@voidzero-dev/vite-plus-core@latest
+  vitest: 4.1.9
+  vite-plus: ^0.2.1
+  babel-plugin-react-compiler: ^1.0.0
+  '@rolldown/plugin-babel': ^0.2.3
+overrides:
+  vite: 'catalog:'
+  vitest: 'catalog:'
+peerDependencyRules:
+  allowAny:
+    - vite
+    - vitest
+  allowedVersions:
+    vite: '*'
+    vitest: '*'
+minimumReleaseAgeExclude:
+  - '@hugeicons/react@1.1.9'
+allowBuilds:
+  '@swc/core': set this to true or false

package/template/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true
+  }
+}

package/template/vite.config.ts

@@ -0,0 +1,24 @@
+import { defaultExclude, defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  test: {
+    // vite-plus's defaultExclude is only node_modules + .git (no dist), so a root-level
+    // `vp test` would otherwise scan compiled build output. Keep build outputs out of the scan.
+    exclude: [...defaultExclude, '**/dist/**', '**/build/**']
+  },
+  fmt: {
+    jsxSingleQuote: true,
+    printWidth: 160,
+    semi: false,
+    singleQuote: true,
+    trailingComma: 'none'
+  },
+  lint: {
+    jsPlugins: [{ name: 'vite-plus', specifier: 'vite-plus/oxlint-plugin' }],
+    rules: { 'vite-plus/prefer-vite-plus-imports': 'error' },
+    options: { typeAware: true, typeCheck: true }
+  },
+  run: {
+    cache: true
+  }
+})