Checkpoint before follow-up message

Co-authored-by: eric.luce <eric.luce@proofgeist.com>

Author: cursoragent

.changeset/ui-default-shadcn.md

@@ -0,0 +1,5 @@
+---
+"@proofkit/cli": minor
+---
+
+CLI defaults to shadcn/ui for new projects. Legacy Mantine templates are still available via a hidden `--ui mantine` flag during `init`. The selected UI is persisted in `proofkit.json` as `ui`. Existing projects using Mantine are auto-detected and remain fully supported. For shadcn-based projects, adding new pages or auth via `proofkit add` is temporarily disabled while we work on a new component system.

packages/cli/src/cli/add/auth.ts

@@ -14,6 +14,11 @@ export async function runAddAuthAction() {
   if (settings.appType !== "browser") {
     return p.cancel(`Auth is not supported for your app type.`);
   }
+  if (settings.ui === "shadcn") {
+    return p.cancel(
+      "Adding auth is not yet supported for shadcn-based projects."
+    );
+  }
 
   const authType =
     state.authType ??

packages/cli/src/cli/add/index.ts

@@ -47,6 +47,15 @@ export const runAdd = async (name: string | undefined) => {
     })
   );
 
+  // For shadcn projects, block adding new pages or auth for now
+  if (settings.ui === "shadcn") {
+    if (addType === "page" || addType === "auth") {
+      return p.cancel(
+        "Adding new pages or auth is not yet supported for shadcn-based projects."
+      );
+    }
+  }
+
   if (addType === "auth") {
     await runAddAuthAction();
   } else if (addType === "data") {

packages/cli/src/cli/add/page/index.ts

@@ -29,6 +29,11 @@ export const runAddPageAction = async (opts?: {
   const projectDir = state.projectDir;
 
   const settings = getSettings();
+  if (settings.ui === "shadcn") {
+    return p.cancel(
+      "Adding pages is not yet supported for shadcn-based projects."
+    );
+  }
 
   const templates =
     state.appType === "browser"

packages/cli/src/cli/init.ts

@@ -14,13 +14,19 @@ import { initializeGit } from "~/helpers/git.js";
 import { installDependencies } from "~/helpers/installDependencies.js";
 import { logNextSteps } from "~/helpers/logNextSteps.js";
 import { setImportAlias } from "~/helpers/setImportAlias.js";
+import { getRegistryUrl, shadcnInstall } from "~/helpers/shadcn-cli.js";
 import { buildPkgInstallerMap } from "~/installers/index.js";
 import { ensureWebViewerAddonInstalled } from "~/installers/proofkit-webviewer.js";
 import { initProgramState, state } from "~/state.js";
 import { addPackageDependency } from "~/utils/addPackageDependency.js";
 import { getVersion } from "~/utils/getProofKitVersion.js";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 import { parseNameAndPath } from "~/utils/parseNameAndPath.js";
+import {
+  getSettings,
+  setSettings,
+  type Settings,
+} from "~/utils/parseSettings.js";
 import { validateAppName } from "~/utils/validateAppName.js";
 import { promptForFileMakerDataSource } from "./add/data-source/filemaker.js";
 import { abortIfCancel } from "./utils.js";
@@ -39,6 +45,8 @@ interface CliFlags {
   fmServerURL: string;
   auth: "none" | "next-auth" | "clerk";
   dataSource?: "filemaker" | "none" | "supabase";
+  /** @internal UI library selection; hidden flag */
+  ui?: "shadcn" | "mantine";
   /** @internal Used in CI. */
   CI: boolean;
   /** @internal Used in CI. */
@@ -72,6 +80,7 @@ const defaultOptions: CliFlags = {
   dataApiKey: "",
   fmServerURL: "",
   dataSource: undefined,
+  ui: "shadcn",
 };
 
 export const makeInitCommand = () => {
@@ -82,6 +91,8 @@ export const makeInitCommand = () => {
       "The name of the application, as well as the name of the directory to create"
     )
     .option("--appType [type]", "The type of app to create", undefined)
+    // hidden UI selector; default is shadcn; pass --ui mantine to opt-in legacy Mantine templates
+    .option("--ui [ui]", undefined, undefined)
     .option("--server [url]", "The URL of your FileMaker Server", undefined)
     .option(
       "--adminApiKey [key]",
@@ -166,6 +177,8 @@ type ProofKitPackageJSON = PackageJson & {
 export const runInit = async (name?: string, opts?: CliFlags) => {
   const pkgManager = getUserPkgManager();
   const cliOptions = opts ?? defaultOptions;
+  // capture ui choice early into state
+  state.ui = (cliOptions.ui ?? "shadcn") as "shadcn" | "mantine";
 
   const projectName =
     name ||
@@ -211,13 +224,7 @@ export const runInit = async (name?: string, opts?: CliFlags) => {
     noInstall: cliOptions.noInstall,
     appRouter: cliOptions.appRouter,
   });
-  state.projectDir = projectDir;
   setImportAlias(projectDir, "@/");
-  addPackageDependency({
-    dependencies: ["@proofkit/cli", "@types/node"],
-    devMode: true,
-    projectDir,
-  });
 
   // Write name to package.json
   const pkgJson = fs.readJSONSync(
@@ -238,6 +245,19 @@ export const runInit = async (name?: string, opts?: CliFlags) => {
     spaces: 2,
   });
 
+  // Ensure proofkit.json exists with initial settings including ui
+  const initialSettings: Settings = {
+    appType: state.appType ?? "browser",
+    ui: (state.ui as "shadcn" | "mantine") ?? "shadcn",
+    auth: { type: "none" },
+    envFile: ".env",
+    dataSources: [],
+    tanstackQuery: false,
+    replacedMainPage: false,
+    appliedUpgrades: ["cursorRules"],
+  };
+  const { registryUrl } = setSettings(initialSettings);
+
   // for webviewer apps FM is required, so don't ask
   let dataSource =
     state.appType === "webviewer" ? "filemaker" : cliOptions.dataSource;
@@ -285,11 +305,18 @@ export const runInit = async (name?: string, opts?: CliFlags) => {
 
   await askForAuth({ projectDir });
 
-  if (!cliOptions.noInstall) {
-    await installDependencies({ projectDir });
-    await runCodegenCommand();
+  await installDependencies({ projectDir });
+
+  if (state.ui === "shadcn") {
+    await shadcnInstall([
+      `${getRegistryUrl()}/r/mode-toggle`,
+      "sonner",
+      "button",
+    ]);
   }
 
+  await runCodegenCommand();
+
   if (!cliOptions.noGit) {
     await initializeGit(projectDir);
   }

packages/cli/src/consts.ts

@@ -27,3 +27,8 @@ ${" ".repeat(61 - versionCharLength)}v${version}
 `;
 export const DEFAULT_APP_NAME = "my-proofkit-app";
 export const CREATE_FM_APP = cliName;
+
+export const DEFAULT_REGISTRY_URL =
+  process.env.NODE_ENV === "development"
+    ? "http://localhost:3005"
+    : "https://proofkit.dev";

packages/cli/src/helpers/createProject.ts

@@ -8,6 +8,7 @@ import { state } from "~/state.js";
 import { addPackageDependency } from "~/utils/addPackageDependency.js";
 import { getUserPkgManager } from "~/utils/getUserPkgManager.js";
 import { replaceTextInFiles } from "./replaceText.js";
+import { shadcnInstall } from "./shadcn-cli.js";
 
 interface CreateProjectOptions {
   projectName: string;
@@ -34,9 +35,14 @@ export const createBareProject = async ({
     noInstall,
   });
 
-  // Add new base dependencies for Tailwind v4 and shadcn/ui
+  addPackageDependency({
+    dependencies: ["@proofkit/cli", "@types/node"],
+    devMode: true,
+  });
+
+  // Add new base dependencies for Tailwind v4 and shadcn/ui or legacy Mantine
   // These should match the plan and dependencyVersionMap
-  const BASE_DEPS = [
+  const SHADCN_BASE_DEPS = [
     "@radix-ui/react-slot",
     "@tailwindcss/postcss",
     "class-variance-authority",
@@ -45,22 +51,48 @@ export const createBareProject = async ({
     "tailwind-merge",
     "tailwindcss",
     "tw-animate-css",
+    "next-themes",
   ] as AvailableDependencies[];
-  const BASE_DEV_DEPS = [
+  const SHADCN_BASE_DEV_DEPS = [
     "prettier",
     "prettier-plugin-tailwindcss",
   ] as AvailableDependencies[];
 
-  addPackageDependency({
-    dependencies: BASE_DEPS,
-    devMode: false,
-    projectDir: state.projectDir,
-  });
-  addPackageDependency({
-    dependencies: BASE_DEV_DEPS,
-    devMode: true,
-    projectDir: state.projectDir,
-  });
+  const MANTINE_DEPS = [
+    "@mantine/core",
+    "@mantine/dates",
+    "@mantine/hooks",
+    "@mantine/modals",
+    "@mantine/notifications",
+    "mantine-react-table",
+  ] as AvailableDependencies[];
+  const MANTINE_DEV_DEPS = [
+    "postcss",
+    "postcss-preset-mantine",
+    "postcss-simple-vars",
+  ] as AvailableDependencies[];
+
+  if (state.ui === "mantine") {
+    addPackageDependency({
+      dependencies: MANTINE_DEPS,
+      devMode: false,
+    });
+    addPackageDependency({
+      dependencies: MANTINE_DEV_DEPS,
+      devMode: true,
+    });
+  } else if (state.ui === "shadcn") {
+    addPackageDependency({
+      dependencies: SHADCN_BASE_DEPS,
+      devMode: false,
+    });
+    addPackageDependency({
+      dependencies: SHADCN_BASE_DEV_DEPS,
+      devMode: true,
+    });
+  } else {
+    throw new Error(`Unsupported UI library: ${state.ui}`);
+  }
 
   // Install the selected packages
   installPackages({

packages/cli/src/helpers/installDependencies.ts

@@ -16,6 +16,7 @@ const execWithSpinner = async (
     args?: string[];
     stdout?: StdoutStderrOption;
     onDataHandle?: (spinner: Ora) => (data: Buffer) => void;
+    loadingMessage?: string;
   }
 ) => {
   const { onDataHandle, args = ["install"], stdout = "pipe" } = options;
@@ -24,7 +25,9 @@ const execWithSpinner = async (
     args.push("--prefer-offline");
   }
 
-  const spinner = ora(`Running ${pkgManager} ${args.join(" ")} ...`).start();
+  const spinner = ora(
+    options.loadingMessage ?? `Running ${pkgManager} ${args.join(" ")} ...`
+  ).start();
   const subprocess = execa(pkgManager, args, { cwd: projectDir, stdout });
 
   await new Promise<void>((res, rej) => {
@@ -93,14 +96,20 @@ export const installDependencies = async (args?: { projectDir?: string }) => {
 
 export const runExecCommand = async ({
   command,
-  projectDir,
+  projectDir = state.projectDir,
   successMessage,
+  loadingMessage,
 }: {
   command: string[];
-  projectDir: string;
+  projectDir?: string;
   successMessage?: string;
+  loadingMessage?: string;
 }) => {
-  const spinner = await _runExecCommand({ projectDir, command });
+  const spinner = await _runExecCommand({
+    projectDir,
+    command,
+    loadingMessage,
+  });
 
   // If the spinner was used to show the progress, use succeed method on it
   // If not, use the succeed on a new spinner
@@ -116,10 +125,12 @@ export const runExecCommand = async ({
 export const _runExecCommand = async ({
   projectDir,
   command,
+  loadingMessage,
 }: {
   projectDir: string;
   exec?: boolean;
   command: string[];
+  loadingMessage?: string;
 }): Promise<Ora | null> => {
   const pkgManager = getUserPkgManager();
   switch (pkgManager) {
@@ -133,8 +144,9 @@ export const _runExecCommand = async ({
       return null;
     // When using yarn or pnpm, use the stdout stream and ora spinner to show the progress
     case "pnpm":
-      return execWithSpinner(projectDir, "pnpx", {
-        args: [...command],
+      return execWithSpinner(projectDir, "pnpm", {
+        args: ["dlx", ...command],
+        loadingMessage,
         onDataHandle: (spinner) => (data) => {
           const text = data.toString();
 
@@ -148,6 +160,7 @@ export const _runExecCommand = async ({
     case "yarn":
       return execWithSpinner(projectDir, pkgManager, {
         args: [...command],
+        loadingMessage,
         onDataHandle: (spinner) => (data) => {
           spinner.text = data.toString();
         },
@@ -157,6 +170,7 @@ export const _runExecCommand = async ({
       return execWithSpinner(projectDir, "bunx", {
         stdout: "ignore",
         args: [...command],
+        loadingMessage,
       });
   }
 };

packages/cli/src/helpers/scaffoldProject.ts

@@ -20,7 +20,9 @@ export const scaffoldProject = async ({
 
   const srcDir = path.join(
     PKG_ROOT,
-    state.appType === "browser" ? "template/nextjs" : "template/vite-wv"
+    state.appType === "browser"
+      ? `template/${state.ui === "mantine" ? "nextjs-mantine" : "nextjs-shadcn"}`
+      : "template/vite-wv"
   );
 
   if (!noInstall) {

packages/cli/src/helpers/shadcn-cli.ts

@@ -0,0 +1,18 @@
+import { DEFAULT_REGISTRY_URL } from "~/consts.js";
+import { getSettings } from "~/utils/parseSettings.js";
+import { runExecCommand } from "./installDependencies.js";
+
+export async function shadcnInstall(components: string | string[]) {
+  const componentsArray = Array.isArray(components) ? components : [components];
+  const command = ["shadcn@latest", "add", ...componentsArray];
+  await runExecCommand({
+    command,
+    loadingMessage: "Installing components...",
+    successMessage: "Components installed successfully!",
+  });
+}
+
+export function getRegistryUrl(): string {
+  const url = getSettings().registryUrl ?? DEFAULT_REGISTRY_URL;
+  return url.endsWith("/") ? url.slice(0, -1) : url;
+}