shapes-ui 0.5.0 → 0.6.0

package/examples/avatar-demo.tsx

@@ -4,15 +4,15 @@ export default function AvatarDemo() {
   return (
     <div className="flex items-center gap-4">
       <Avatar>
-        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarImage src="/shps_black.svg" alt="Shapes UI" className={"bg-muted"} />
         <AvatarFallback>CN</AvatarFallback>
       </Avatar>
       <Avatar size="sm">
-        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarImage src="/shps_black.svg" alt="Shapes UI" className={"bg-muted"} />
         <AvatarFallback>CN</AvatarFallback>
       </Avatar>
       <Avatar size="lg">
-        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarImage src="/shps_black.svg" alt="Shapes UI" className={"bg-muted"} />
         <AvatarFallback>CN</AvatarFallback>
       </Avatar>
       <Avatar>

package/examples/input-group-with-button.tsx

@@ -16,7 +16,7 @@ export default function InputGroupButtonExample() {
   return (
     <div className="grid w-full max-w-sm gap-6">
       <InputGroup>
-        <InputGroupInput placeholder="https://x.com/shadcn" readOnly />
+        <InputGroupInput placeholder="https://shapes-ui.com" readOnly />
         <InputGroupAddon align="inline-end">
           <InputGroupButton aria-label="Copy" title="Copy" size="icon-xs">
             <CopyIcon />

package/examples/separator-demo.tsx

@@ -0,0 +1,13 @@
+import { Separator } from "@/components/ui/separator";
+
+export default function SeparatorDemo() {
+  return (
+    <div className="flex h-5 items-center space-x-4 text-sm">
+      <div>Blog</div>
+      <Separator orientation="vertical" />
+      <div>Docs</div>
+      <Separator orientation="vertical" />
+      <div>Source</div>
+    </div>
+  );
+}

package/examples/separator-horizontal.tsx

@@ -0,0 +1,18 @@
+import { Separator } from "@/components/ui/separator";
+
+export default function SeparatorHorizontal() {
+  return (
+    <div className="w-full max-w-sm space-y-4">
+      <div className="space-y-1">
+        <h4 className="text-sm leading-none font-medium">Shapes UI</h4>
+        <p className="text-sm text-muted-foreground">Headless components and docs</p>
+      </div>
+      <Separator />
+      <div className="flex h-5 items-center gap-4 text-sm">
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Examples</div>
+      </div>
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shapes-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/abbbdab/shapes-ui.git"
@@ -16,13 +16,14 @@
   "dependencies": {
     "@base-ui/react": "^1.2.0",
     "@clack/prompts": "^1.0.1",
-    "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/react-devtools": "^0.9.5",
-    "@tanstack/react-router": "^1.160.2",
-    "@tanstack/react-router-devtools": "^1.160.2",
-    "@tanstack/react-router-ssr-query": "^1.160.2",
-    "@tanstack/react-start": "^1.160.2",
-    "@tanstack/router-plugin": "^1.160.2",
+    "@tabler/icons-react": "^3.37.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-devtools": "^0.9.6",
+    "@tanstack/react-router": "^1.163.3",
+    "@tanstack/react-router-devtools": "^1.163.3",
+    "@tanstack/react-router-ssr-query": "^1.163.3",
+    "@tanstack/react-start": "^1.163.3",
+    "@tanstack/router-plugin": "^1.163.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "commander": "^14.0.3",
@@ -36,42 +37,42 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "rehype-pretty-code": "^0.14.1",
-    "tailwind-merge": "^3.4.1",
-    "tailwindcss": "^4.1.18",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "vite-tsconfig-paths": "^6.1.1",
     "zod-to-json-schema": "^3.25.1"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
-    "@cloudflare/vite-plugin": "^1.25.0",
-    "@content-collections/core": "^0.14.0",
+    "@cloudflare/vite-plugin": "^1.25.6",
+    "@content-collections/core": "^0.14.1",
     "@content-collections/mdx": "^0.2.2",
     "@content-collections/vite": "^0.2.9",
-    "@shikijs/rehype": "^3.22.0",
-    "@tanstack/devtools-vite": "^0.5.1",
+    "@shikijs/rehype": "^3.23.0",
+    "@tanstack/devtools-vite": "^0.5.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/figlet": "^1.7.0",
     "@types/fs-extra": "^11.0.4",
     "@types/gradient-string": "^1.1.6",
-    "@types/node": "^25.2.3",
+    "@types/node": "^25.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
     "add": "^2.0.6",
     "jsdom": "^28.1.0",
     "oxfmt": "^0.32.0",
-    "oxlint": "^1.48.0",
+    "oxlint": "^1.50.0",
     "remark-gfm": "^4.0.1",
-    "shiki": "^3.22.0",
+    "shiki": "^3.23.0",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.18",
     "web-vitals": "^5.1.0",
-    "wrangler": "^4.65.0",
+    "wrangler": "^4.69.0",
     "zod": "^4.3.6"
   },
   "scripts": {

package/public/base-ui.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 17 24" xmlns="http://www.w3.org/2000/svg"><path fill="#737373" d="M9.5001 7.01537C9.2245 6.99837 9 7.22385 9 7.49999V23C13.4183 23 17 19.4183 17 15C17 10.7497 13.6854 7.27351 9.5001 7.01537Z"></path><path fill="#737373" d="M8 9.8V12V23C3.58172 23 0 19.0601 0 14.2V12V1C4.41828 1 8 4.93989 8 9.8Z"></path></svg>

package/src/assets/base-ui.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 17 24" xmlns="http://www.w3.org/2000/svg"><path fill="#737373" d="M9.5001 7.01537C9.2245 6.99837 9 7.22385 9 7.49999V23C13.4183 23 17 19.4183 17 15C17 10.7497 13.6854 7.27351 9.5001 7.01537Z"></path><path fill="#737373" d="M8 9.8V12V23C3.58172 23 0 19.0601 0 14.2V12V1C4.41828 1 8 4.93989 8 9.8Z"></path></svg>

package/src/commands/add.ts

@@ -1,18 +1,17 @@
 import path from "node:path";
 
 import { cancel, multiselect, note, spinner } from "@clack/prompts";
-import { execa } from "execa";
 import fs from "fs-extra";
 
 import type { RegistryItem } from "@/types/registry-item";
 import { exitIfCancelled } from "@/utils/cli-utils";
-import { getInstallCommand } from "@/utils/package-manager";
+import { installDependencies } from "@/utils/dependency-installer";
 import type { Config } from "@/utils/schema";
 
 const REGISTRY_URL = "https://shapes-ui.com/r";
 
-export async function loadRegistryIndex() {
-  const localRegistryDir = path.resolve(process.cwd(), "public/r");
+export async function loadRegistryIndex(cwd = process.cwd()) {
+  const localRegistryDir = path.resolve(cwd, "public/r");
   if (await fs.pathExists(localRegistryDir)) {
     const files = await fs.readdir(localRegistryDir);
     const entries: RegistryItem[] = [];
@@ -47,7 +46,7 @@ export async function loadRegistryIndex() {
 export async function pickComponents() {
   let components: string[] = [];
   try {
-    components = await loadRegistryIndex();
+    components = await loadRegistryIndex(process.cwd());
   } catch (error) {
     cancel(error instanceof Error ? error.message : "Failed to load registry.");
     process.exit(1);
@@ -68,49 +67,90 @@ export async function pickComponents() {
   return selected as string[];
 }
 
-export async function installComponent(name: string, config: Config) {
-  const spin = spinner();
-  spin.start(`Fetching ${name}`);
+type InstallContext = {
+  installing: Set<string>;
+  installed: Set<string>;
+};
 
-  let data: RegistryItem;
+function createInstallContext(): InstallContext {
+  return {
+    installing: new Set<string>(),
+    installed: new Set<string>(),
+  };
+}
 
-  const localFile = path.resolve(process.cwd(), `public/r/${name}.json`);
-  if (await fs.pathExists(localFile)) {
-    data = await fs.readJSON(localFile);
-  } else {
-    const res = await fetch(`${REGISTRY_URL}/${name}.json`);
-    if (!res.ok) {
-      spin.stop("Fetch failed");
-      throw new Error(`Component ${name} not found in registry.`);
-    }
-    data = await res.json();
+export async function installComponent(
+  name: string,
+  config: Config,
+  context = createInstallContext(),
+  cwd = process.cwd(),
+) {
+  if (context.installed.has(name)) return;
+  if (context.installing.has(name)) {
+    note(`Skipped circular dependency while resolving ${name}`);
+    return;
   }
 
-  spin.stop(`Fetched ${name}`);
+  context.installing.add(name);
+  try {
+    const spin = spinner();
+    spin.start(`Fetching ${name}`);
+
+    let data: RegistryItem;
+
+    const localFile = path.resolve(cwd, `public/r/${name}.json`);
+    if (await fs.pathExists(localFile)) {
+      data = await fs.readJSON(localFile);
+    } else {
+      const res = await fetch(`${REGISTRY_URL}/${name}.json`);
+      if (!res.ok) {
+        spin.stop("Fetch failed");
+        throw new Error(`Component ${name} not found in registry.`);
+      }
+      data = await res.json();
+    }
+
+    spin.stop(`Fetched ${name}`);
 
-  // 1. Recursive Install of Registry Dependencies
-  if (data.registryDependencies) {
-    for (const dep of data.registryDependencies) {
-      const depPath = path.join(process.cwd(), config.paths.ui, `${dep}.tsx`);
-      if (!fs.existsSync(depPath)) {
-        await installComponent(dep, config);
+    // 1. Recursive Install of Registry Dependencies
+    if (data.registryDependencies) {
+      for (const dep of data.registryDependencies) {
+        const depPath = path.join(cwd, config.paths.ui, `${dep}.tsx`);
+        if (!fs.existsSync(depPath)) {
+          await installComponent(dep, config, context, cwd);
+        }
       }
     }
-  }
 
-  // 2. Install NPM Dependencies
-  if (data.dependencies?.length) {
-    const [command, ...args] = await getInstallCommand(data.dependencies);
-    await execa(command, args);
+    // 2. Install NPM Dependencies
+    if (data.dependencies?.length) {
+      await installDependencies(data.dependencies, {
+        label: `Installing dependencies for ${name}`,
+        successMessage: `Dependencies installed for ${name}`,
+        cwd,
+      });
+    }
+
+    // 3. Write Files
+    for (const file of data.files) {
+      const target = path.join(cwd, config.paths.ui, file.path);
+      await fs.ensureDir(path.dirname(target));
+      await fs.writeFile(target, file.content);
+    }
+
+    context.installed.add(name);
+    note(`Added ${name}`);
+  } finally {
+    context.installing.delete(name);
   }
+}
 
-  // 3. Write Files
-  for (const file of data.files) {
-    const target = path.join(process.cwd(), config.paths.ui, file.path);
-    await fs.ensureDir(path.dirname(target));
-    await fs.writeFile(target, file.content);
+export async function addAllComponents(config: Config, cwd = process.cwd()) {
+  const all = await loadRegistryIndex(cwd);
+  const context = createInstallContext();
+  for (const name of all) {
+    await installComponent(name, config, context, cwd);
   }
-  note(`Added ${name}`);
 }
 
 export async function addCommand(components: string[], config: Config) {
@@ -119,7 +159,8 @@ export async function addCommand(components: string[], config: Config) {
     selections = await pickComponents();
   }
 
+  const context = createInstallContext();
   for (const name of selections) {
-    await installComponent(name, config);
+    await installComponent(name, config, context, process.cwd());
   }
 }

package/src/commands/cli.ts

@@ -3,25 +3,72 @@ import { Command } from "commander";
 
 import { getConfig } from "@/utils/cli-utils";
 
-import { addCommand } from "./add";
+import { addAllComponents, addCommand } from "./add";
+import { createCommand } from "./create";
 import { initCommand } from "./init";
+import { paletteSetCommand } from "./palette";
 
 const program = new Command();
 
-program.name("shapes").description("Shapes UI CLI").version("0.0.1");
+program.name("shapes-ui").description("Shapes UI CLI").version("0.0.1");
 
 program.command("init").description("Configure Shapes UI for your project").action(initCommand);
 
+program
+  .command("create [project-name]")
+  .description("Create a new Vite React TypeScript app ready for Shapes UI")
+  .option("-i, --install", "Install project dependencies")
+  .option("--full", "Configure Shapes UI and install all components")
+  .option("--style <style>", "Shapes style for --full (default|brutalist|minimal)")
+  .option("--palette <name>", "Brand palette for --full (e.g. blue, emerald, rose)")
+  .option("--contrast-mode <mode>", "Foreground contrast mode for --full (deterministic|dynamic)")
+  .option("--ui-path <path>", "UI components path for --full (e.g. ./src/components/ui)")
+  .option("--css-path <path>", "Tailwind CSS file path for --full (e.g. src/index.css)")
+  .option("-f, --force", "Overwrite target directory if it already exists")
+  .action(async (projectName, options) => {
+    await createCommand(projectName, {
+      install: options.install,
+      full: options.full,
+      style: options.style,
+      palette: options.palette,
+      contrastMode: options.contrastMode,
+      uiPath: options.uiPath,
+      cssPath: options.cssPath,
+      force: options.force,
+    });
+  });
+
 program
   .command("add [components...]")
   .description("Add components to your project")
-  .action(async (components) => {
+  .option("-a, --all", "Add all available components")
+  .action(async (components, options) => {
     const config = await getConfig();
     if (!config) {
       console.error("Please run 'init' first.");
       return;
     }
+    if (options.all) {
+      await addAllComponents(config);
+      return;
+    }
     await addCommand(components, config);
   });
 
+program
+  .command("palette")
+  .description("Manage color palettes")
+  .command("set <name>")
+  .description("Set brand palette and regenerate semantic tokens")
+  .option("--css-path <path>", "Override Tailwind CSS file path")
+  .option("--contrast-mode <mode>", "Foreground contrast mode (deterministic|dynamic)")
+  .option("--refresh", "Refresh Tailwind palette data from docs")
+  .action(async (name, options) => {
+    await paletteSetCommand(name, {
+      cssPath: options.cssPath,
+      contrastMode: options.contrastMode,
+      refresh: options.refresh,
+    });
+  });
+
 program.parse();

package/src/commands/create.ts

@@ -0,0 +1,262 @@
+import path from "node:path";
+
+import { confirm, intro, note, outro, spinner, text } from "@clack/prompts";
+import { execa } from "execa";
+import fs from "fs-extra";
+import pc from "picocolors";
+
+import { addAllComponents } from "@/commands/add";
+import {
+  exitIfCancelled,
+  getMissingDeps,
+  isTailwindV4Installed,
+  isViteProject,
+  readPackageJson,
+} from "@/utils/cli-utils";
+import { installDependencies } from "@/utils/dependency-installer";
+import { getPackageManager } from "@/utils/package-manager";
+import {
+  type ContrastMode,
+  getDefaultBrandPaletteOptions,
+  normalizeContrastMode,
+  writePaletteTokens,
+} from "@/utils/palette";
+import type { Config } from "@/utils/schema";
+
+type CreateOptions = {
+  install?: boolean;
+  force?: boolean;
+  full?: boolean;
+  style?: Config["style"];
+  palette?: string;
+  contrastMode?: ContrastMode | string;
+  uiPath?: string;
+  cssPath?: string;
+};
+
+const BASE_DEPS = [
+  "@base-ui/react",
+  "class-variance-authority",
+  "clsx",
+  "lucide-react",
+  "tailwind-merge",
+  "tw-animate-css",
+];
+
+async function ensureTailwindStyles(cwd: string, cssPath: string) {
+  const template = '@import "tailwindcss";\n';
+  const absPath = path.join(cwd, cssPath);
+  await fs.ensureDir(path.dirname(absPath));
+
+  if (await fs.pathExists(absPath)) {
+    const current = await fs.readFile(absPath, "utf-8");
+    if (current.includes("tailwindcss") || current.includes("@tailwind")) return;
+    await fs.writeFile(absPath, `${current.trimEnd()}\n\n${template}`);
+    return;
+  }
+
+  await fs.writeFile(absPath, template);
+}
+
+async function setupShapesFull(projectDir: string, options: CreateOptions) {
+  const setupSpin = spinner();
+  setupSpin.start("Configuring Shapes UI");
+
+  const cssPath = options.cssPath ?? "src/index.css";
+  const uiPath = options.uiPath ?? "./src/components/ui";
+  const style = options.style ?? "default";
+  const palette = options.palette ?? "blue";
+  const contrastMode = options.contrastMode ?? "deterministic";
+  const pkg = await readPackageJson(projectDir);
+  const hasTailwindV4 = isTailwindV4Installed(pkg);
+  const isVite = await isViteProject(projectDir);
+
+  if (!hasTailwindV4) {
+    const tailwindDeps = ["tailwindcss"];
+    if (isVite) {
+      tailwindDeps.push("@tailwindcss/vite");
+    }
+
+    await installDependencies(tailwindDeps, {
+      dev: true,
+      label: "Installing Tailwind dependencies",
+      successMessage: "Tailwind dependencies installed",
+      cwd: projectDir,
+    });
+  }
+
+  const latestPkg = await readPackageJson(projectDir);
+  const missingBaseDeps = getMissingDeps(latestPkg, BASE_DEPS);
+  await installDependencies(missingBaseDeps, {
+    label: "Installing Shapes base dependencies",
+    successMessage: "Shapes base dependencies installed",
+    cwd: projectDir,
+  });
+
+  await ensureTailwindStyles(projectDir, cssPath);
+
+  const paletteResult = await writePaletteTokens({
+    cwd: projectDir,
+    cssPath,
+    paletteName: palette,
+    neutralPalette: "zinc",
+    contrastMode,
+  });
+
+  const config: Config = {
+    $schema: "https://shapes-ui.com/schema.json",
+    style,
+    palette: {
+      name: paletteResult.paletteName,
+      contrastMode: paletteResult.contrastMode,
+    },
+    tailwind: { css: cssPath, baseColor: "zinc" },
+    paths: { ui: uiPath, lib: "./src/lib" },
+  };
+
+  await fs.writeJSON(path.join(projectDir, "shapes.json"), config, { spaces: 2 });
+  await addAllComponents(config, projectDir);
+
+  setupSpin.stop("Shapes UI configured with all components");
+}
+
+function getCreateCommand(packageManager: string, projectName: string) {
+  if (packageManager === "pnpm") {
+    return ["pnpm", ["create", "vite", projectName, "--template", "react-ts"]] as const;
+  }
+
+  if (packageManager === "yarn") {
+    return ["yarn", ["create", "vite", projectName, "--template", "react-ts"]] as const;
+  }
+
+  if (packageManager === "bun") {
+    return ["bun", ["create", "vite", projectName, "--template", "react-ts"]] as const;
+  }
+
+  return ["npm", ["create", "vite@latest", projectName, "--", "--template", "react-ts"]] as const;
+}
+
+function getProjectInstallCommand(packageManager: string) {
+  if (packageManager === "pnpm") {
+    return ["pnpm", ["install"]] as const;
+  }
+
+  if (packageManager === "yarn") {
+    return ["yarn", ["install"]] as const;
+  }
+
+  if (packageManager === "bun") {
+    return ["bun", ["install"]] as const;
+  }
+
+  return ["npm", ["install"]] as const;
+}
+
+export async function createCommand(projectNameArg?: string, options: CreateOptions = {}) {
+  intro(pc.bgCyan(pc.black(" Create a Shapes UI app ")));
+
+  const allowedStyles = new Set<Config["style"]>(["default", "brutalist", "minimal"]);
+  if (options.style && !allowedStyles.has(options.style)) {
+    throw new Error(`Invalid style "${options.style}". Use one of: default, brutalist, minimal.`);
+  }
+
+  if (options.palette) {
+    const normalizedPalette = options.palette.toLowerCase();
+    const allowedPalettes = new Set<string>(getDefaultBrandPaletteOptions());
+    if (!allowedPalettes.has(normalizedPalette)) {
+      throw new Error(
+        `Invalid palette "${options.palette}". Use one of: ${getDefaultBrandPaletteOptions().join(", ")}.`,
+      );
+    }
+    options.palette = normalizedPalette;
+  }
+
+  if (options.contrastMode) {
+    options.contrastMode = normalizeContrastMode(options.contrastMode);
+  }
+
+  if (options.uiPath !== undefined && !options.uiPath.trim()) {
+    throw new Error("Invalid ui path. Please provide a non-empty value.");
+  }
+
+  if (options.cssPath !== undefined && !options.cssPath.trim()) {
+    throw new Error("Invalid css path. Please provide a non-empty value.");
+  }
+
+  const projectName =
+    projectNameArg && projectNameArg.trim().length > 0
+      ? projectNameArg.trim()
+      : (
+          exitIfCancelled(
+            await text({
+              message: "Project name",
+              initialValue: "my-shapes-app",
+              validate(value) {
+                if (!value || !value.trim()) return "Project name is required.";
+                return undefined;
+              },
+            }),
+          ) as string
+        ).trim();
+
+  const projectDir = path.resolve(process.cwd(), projectName);
+  const exists = await fs.pathExists(projectDir);
+
+  if (exists) {
+    const overwrite =
+      options.force ??
+      exitIfCancelled(
+        await confirm({
+          message: `${projectName} already exists. Overwrite it?`,
+          initialValue: false,
+        }),
+      );
+
+    if (!overwrite) {
+      outro(pc.yellow("Create cancelled."));
+      return;
+    }
+
+    await fs.remove(projectDir);
+  }
+
+  const packageManager = await getPackageManager();
+  const [createCommandName, createArgs] = getCreateCommand(packageManager, projectName);
+
+  const createSpin = spinner();
+  createSpin.start(`Scaffolding ${projectName}`);
+
+  await execa(createCommandName, createArgs, { stdio: "ignore" });
+  createSpin.stop(`Created ${projectName}`);
+
+  note(`Project scaffolded with ${packageManager} + Vite (React + TypeScript).`, "Create");
+
+  const shouldInstallProjectDeps = options.install || options.full;
+
+  if (shouldInstallProjectDeps) {
+    const [installCommand, installArgs] = getProjectInstallCommand(packageManager);
+    const installSpin = spinner();
+    installSpin.start("Installing project dependencies");
+
+    await execa(installCommand, installArgs, {
+      cwd: projectDir,
+      stdio: "ignore",
+    });
+
+    installSpin.stop("Dependencies installed");
+  }
+
+  if (options.full) {
+    await setupShapesFull(projectDir, options);
+  }
+
+  const runShapesInit = `${packageManager === "npm" ? "npx" : packageManager === "pnpm" ? "pnpm dlx" : packageManager === "yarn" ? "yarn dlx" : "bunx"} shapes-ui init`;
+
+  outro(
+    `${pc.green(options.full ? "Project ready with Shapes UI." : "Project ready.")}\n\n` +
+      `${pc.bold("Next steps:")}\n` +
+      `  cd ${projectName}\n` +
+      `  ${shouldInstallProjectDeps ? "" : `${packageManager} install\n  `}${options.full ? "" : `${runShapesInit}\n  `}` +
+      `  ${packageManager} run dev`,
+  );
+}