shapes-ui 0.1.1

package/scripts/generate-registry.mts

@@ -0,0 +1,129 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import ts from "typescript";
+
+import type { RegistryItem } from "../src/types/registry-item";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const workspaceRoot = path.resolve(__dirname, "..");
+const uiDir = path.join(workspaceRoot, "src", "components", "ui");
+const outputDir = path.join(workspaceRoot, "public", "r");
+
+type DependencyInfo = {
+  dependencies: string[];
+  registryDependencies: string[];
+};
+
+export function inferDependencies(options: {
+  name: string;
+  content: string;
+  filePath: string;
+  uiDir: string;
+}): DependencyInfo {
+  const { name, content, filePath, uiDir } = options;
+  const sourceFile = ts.createSourceFile(
+    filePath,
+    content,
+    ts.ScriptTarget.ESNext,
+    true,
+    ts.ScriptKind.TSX,
+  );
+
+  const importSpecifiers = new Set<string>();
+  sourceFile.forEachChild((node) => {
+    if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) {
+      importSpecifiers.add(node.moduleSpecifier.text);
+    }
+  });
+
+  const dependencies = new Set<string>();
+  const registryDependencies = new Set<string>();
+
+  for (const spec of importSpecifiers) {
+    if (spec.startsWith("@/")) {
+      if (spec.startsWith("@/components/ui/")) {
+        const depName = spec.replace("@/components/ui/", "").split("/")[0];
+        if (depName && depName !== name) registryDependencies.add(depName);
+      }
+      continue;
+    }
+
+    if (spec.startsWith("./") || spec.startsWith("../")) {
+      const resolved = path.resolve(path.dirname(filePath), spec);
+      if (resolved.startsWith(uiDir)) {
+        const depName = path.basename(resolved).replace(/\.(t|j)sx?$/, "");
+        if (depName && depName !== name && depName !== "index") {
+          registryDependencies.add(depName);
+        }
+      }
+      continue;
+    }
+
+    const packageName = spec.startsWith("@")
+      ? spec.split("/").slice(0, 2).join("/")
+      : spec.split("/")[0];
+
+    if (packageName && packageName !== "react" && packageName !== "react-dom") {
+      dependencies.add(packageName);
+    }
+  }
+
+  return {
+    dependencies: Array.from(dependencies),
+    registryDependencies: Array.from(registryDependencies),
+  };
+}
+
+async function generate() {
+  await fs.mkdir(outputDir, { recursive: true });
+
+  const files = await fs.readdir(uiDir);
+  const componentFiles = files.filter((f) => f.endsWith(".tsx"));
+
+  const registryIndex: string[] = [];
+
+  for (const file of componentFiles) {
+    const name = file.replace(".tsx", "");
+    const content = await fs.readFile(path.join(uiDir, file), "utf-8");
+
+    const { dependencies, registryDependencies } = inferDependencies({
+      name,
+      content,
+      filePath: path.join(uiDir, file),
+      uiDir,
+    });
+
+    const registryItem: RegistryItem = {
+      name,
+      type: "registry:ui",
+      dependencies,
+      registryDependencies,
+      files: [
+        {
+          path: `${name}.tsx`,
+          content,
+          type: "registry:ui",
+        },
+      ],
+    };
+
+    await fs.writeFile(path.join(outputDir, `${name}.json`), JSON.stringify(registryItem, null, 2));
+
+    registryIndex.push(name);
+    console.log(`✅ Generated ${name}.json`);
+  }
+
+  await fs.writeFile(path.join(outputDir, "index.json"), JSON.stringify(registryIndex, null, 2));
+  console.log("✅ Generated index.json");
+}
+
+const entryFile = process.argv[1] ? path.resolve(process.argv[1]) : "";
+const isDirectRun = fileURLToPath(import.meta.url) === entryFile;
+
+if (isDirectRun) {
+  generate().catch(console.error);
+}

package/src/commands/add.ts

@@ -0,0 +1,125 @@
+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 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");
+  if (await fs.pathExists(localRegistryDir)) {
+    const files = await fs.readdir(localRegistryDir);
+    const entries: RegistryItem[] = [];
+
+    for (const file of files) {
+      if (!file.endsWith(".json") || file === "index.json") continue;
+      const data = await fs.readJSON(path.join(localRegistryDir, file));
+      if (data?.name) entries.push(data);
+    }
+
+    return entries.map((entry) => entry.name).sort();
+  }
+
+  const res = await fetch(`${REGISTRY_URL}/index.json`);
+  if (!res.ok) throw new Error("Registry index not found.");
+  const data = await res.json();
+
+  if (Array.isArray(data) && data.every((item) => typeof item === "string")) {
+    return data.sort();
+  }
+
+  if (Array.isArray(data)) {
+    return data
+      .map((item) => item?.name)
+      .filter((name) => typeof name === "string")
+      .sort();
+  }
+
+  return [];
+}
+
+export async function pickComponents() {
+  let components: string[] = [];
+  try {
+    components = await loadRegistryIndex();
+  } catch (error) {
+    cancel(error instanceof Error ? error.message : "Failed to load registry.");
+    process.exit(1);
+  }
+
+  if (!components.length) {
+    note("No components found in the registry.");
+    return [] as string[];
+  }
+
+  const selected = exitIfCancelled(
+    await multiselect({
+      message: "Select components to add",
+      options: components.map((name) => ({ label: name, value: name })),
+    }),
+  );
+
+  return selected as string[];
+}
+
+export async function installComponent(name: string, config: Config) {
+  const spin = spinner();
+  spin.start(`Fetching ${name}`);
+
+  let data: RegistryItem;
+
+  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();
+  }
+
+  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);
+      }
+    }
+  }
+
+  // 2. Install NPM Dependencies
+  if (data.dependencies?.length) {
+    const [command, ...args] = await getInstallCommand(data.dependencies);
+    await execa(command, args);
+  }
+
+  // 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);
+  }
+  note(`Added ${name}`);
+}
+
+export async function addCommand(components: string[], config: Config) {
+  let selections = components;
+  if (!selections?.length) {
+    selections = await pickComponents();
+  }
+
+  for (const name of selections) {
+    await installComponent(name, config);
+  }
+}

package/src/commands/cli.ts

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+
+import { getConfig } from "@/utils/cli-utils";
+
+import { addCommand } from "./add";
+import { initCommand } from "./init";
+
+const program = new Command();
+
+program.name("shapes").description("Shapes UI CLI").version("0.0.1");
+
+program.command("init").description("Configure Shapes UI for your project").action(initCommand);
+
+program
+  .command("add [components...]")
+  .description("Add components to your project")
+  .action(async (components) => {
+    const config = await getConfig();
+    if (!config) {
+      console.error("Please run 'init' first.");
+      return;
+    }
+    await addCommand(components, config);
+  });
+
+program.parse();

package/src/commands/init.ts

@@ -0,0 +1,128 @@
+import path from "node:path";
+
+import { confirm, intro, note, outro, select, text, spinner } from "@clack/prompts";
+import { execa } from "execa";
+import fs from "fs-extra";
+
+import { pickComponents, installComponent } from "@/commands/add";
+import {
+  exitIfCancelled,
+  getMissingDeps,
+  isTailwindV4Installed,
+  readPackageJson,
+} from "@/utils/cli-utils";
+import { getInstallCommand } from "@/utils/package-manager";
+import { type Config } from "@/utils/schema";
+
+const BASE_DEPS = [
+  "@base-ui/react",
+  "class-variance-authority",
+  "clsx",
+  "lucide-react",
+  "tailwind-merge",
+  "tw-animate-css",
+];
+const TAILWIND_DEV_DEPS = ["tailwindcss", "@tailwindcss/vite"];
+
+async function installDeps(deps: string[], dev = false) {
+  if (!deps.length) return;
+  const spin = spinner();
+  const label = dev ? "Installing Tailwind v4" : "Installing base dependencies";
+  spin.start(label);
+
+  const [command, ...args] = await getInstallCommand(deps, dev);
+  await execa(command, args);
+
+  spin.stop("Dependencies installed");
+}
+
+async function ensureTailwindStyles(cssPath: string) {
+  const template = '@import "tailwindcss";\n';
+  const absPath = path.join(process.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);
+}
+
+export async function initCommand() {
+  intro("Shapes UI");
+
+  const configPath = path.join(process.cwd(), "shapes.json");
+  if (await fs.pathExists(configPath)) {
+    const overwrite = exitIfCancelled(
+      await confirm({ message: "shapes.json already exists. Overwrite it?" }),
+    );
+    if (!overwrite) {
+      outro("Init cancelled.");
+      return;
+    }
+  }
+
+  const style = exitIfCancelled(
+    await select({
+      message: "Which style do you want to use?",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Brutalist", value: "brutalist" },
+      ],
+    }),
+  );
+
+  const uiPath = exitIfCancelled(
+    await text({
+      message: "Where should we install components?",
+      initialValue: "./src/components/ui",
+    }),
+  );
+
+  const pkg = await readPackageJson();
+  const hasTailwindV4 = isTailwindV4Installed(pkg);
+
+  const hasExistingCss = exitIfCancelled(
+    await confirm({ message: "Do you already have a CSS file?" }),
+  );
+
+  const cssPath = hasExistingCss
+    ? exitIfCancelled(
+        await text({
+          message: "Path to your CSS file",
+          initialValue: "src/styles/globals.css",
+        }),
+      )
+    : "src/styles/globals.css";
+
+  if (!hasTailwindV4) {
+    await installDeps(TAILWIND_DEV_DEPS, true);
+  }
+
+  const missingBaseDeps = getMissingDeps(pkg, BASE_DEPS);
+  await installDeps(missingBaseDeps, false);
+  await ensureTailwindStyles(cssPath);
+
+  const config: Config = {
+    $schema: "https://shapes-ui.com/schema.json",
+    style: style as Config["style"],
+    tailwind: { css: cssPath as string, baseColor: "zinc" },
+    paths: { ui: uiPath as string, lib: "./src/lib" },
+  };
+
+  await fs.writeJSON("shapes.json", config, { spaces: 2 });
+  note("Created shapes.json");
+
+  const addNow = exitIfCancelled(await confirm({ message: "Add components now?" }));
+  if (addNow) {
+    const selected = await pickComponents();
+    for (const name of selected) {
+      await installComponent(name, config);
+    }
+  }
+
+  outro("Shapes UI is ready.");
+}

package/src/components/docs/docs-button.tsx

@@ -0,0 +1,60 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        success:
+          "bg-success/10 text-success hover:bg-success/20 focus-visible:border-success/40 focus-visible:ring-success/20 dark:bg-success/20 dark:hover:bg-success/30 dark:focus-visible:ring-success/40",
+        warning:
+          "bg-warning/10 text-warning hover:bg-warning/20 focus-visible:border-warning/40 focus-visible:ring-warning/20 dark:bg-warning/20 dark:hover:bg-warning/30 dark:focus-visible:ring-warning/40",
+        info: "bg-info/10 text-info hover:bg-info/20 focus-visible:border-info/40 focus-visible:ring-info/20 dark:bg-info/20 dark:hover:bg-info/30 dark:focus-visible:ring-info/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=end]:pr-2 has-data-[icon=start]:pl-2",
+        xs: "r h-6 gap-1 px-2 text-xs  has-data-[icon=end]:pr-1.5 has-data-[icon=start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1  px-2.5 text-[0.8rem]  has-data-[icon=end]:pr-1.5 has-data-[icon=start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=end]:pr-3 has-data-[icon=start]:pl-3",
+        icon: "size-8",
+        "icon-xs": "r size-6  [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7  ",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function DocsButton({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { DocsButton, buttonVariants };

package/src/components/docs/layout/circuit-board.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export function CircuitBoard({ className, ...props }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 304 304"
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      preserveAspectRatio="xMidYMid slice"
+      className={`block ${className ?? ""}`}
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
+      />
+    </svg>
+  );
+}
+
+export default CircuitBoard;

package/src/components/docs/layout/footer.tsx

@@ -0,0 +1,11 @@
+import { Badge } from "@/components/ui/badge";
+
+export function Footer() {
+  return (
+    <footer className=" h-12 border-t">
+      <div className=" container mx-auto flex h-full items-center border-x px-4">
+        <Badge variant={"info"}>Alpha</Badge>
+      </div>
+    </footer>
+  );
+}

package/src/components/docs/layout/header.tsx

@@ -0,0 +1,49 @@
+import { Link } from "@tanstack/react-router";
+import { MenuIcon, SunMoonIcon } from "lucide-react";
+import { useState } from "react";
+
+import { DocsButton } from "@/components/docs/docs-button";
+import { useTheme } from "@/components/docs/theme-provider";
+
+import { MobileMenu } from "./mobile-menu";
+
+export function Header() {
+  const { toggleTheme, theme } = useTheme();
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
+
+  return (
+    <header className=" sticky top-0 z-10 h-12 border-b bg-background">
+      <div className=" container mx-auto  flex h-full items-center justify-between border-x px-4">
+        <Link to="/">
+          <img
+            src={theme === "dark" ? "/shps_white.svg" : "/shps_black.svg"}
+            alt="Shapes UI Logo"
+            className=" size-6"
+          />
+        </Link>
+
+        <div className=" mx-auto hidden gap-4 lg:flex">
+          <DocsButton variant="ghost" size="sm">
+            <Link to="/components">Components</Link>
+          </DocsButton>
+        </div>
+
+        <DocsButton onClick={toggleTheme} variant={"ghost"} className={"hidden lg:inline-flex"}>
+          <SunMoonIcon className=" size-4" />
+        </DocsButton>
+
+        <DocsButton
+          onClick={() => setShowMobileMenu(!showMobileMenu)}
+          variant={"ghost"}
+          size={"sm"}
+          className={"lg:hidden"}
+        >
+          <MenuIcon data-icon="start" />
+          Navigation
+        </DocsButton>
+      </div>
+
+      <MobileMenu open={showMobileMenu} onClose={() => setShowMobileMenu(false)} />
+    </header>
+  );
+}

package/src/components/docs/layout/mobile-menu.tsx

@@ -0,0 +1,86 @@
+import { Link } from "@tanstack/react-router";
+import { clsx } from "clsx";
+import { allComponents } from "content-collections";
+import { Suspense, useEffect, useRef } from "react";
+
+import { SuspenseFallback } from "./suspense-fallback";
+
+export function MobileMenu({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+
+    if (open) {
+      document.addEventListener("keydown", onKey);
+      document.body.style.overflow = "hidden";
+      // Move focus into the panel for accessibility
+      setTimeout(() => panelRef.current?.focus(), 0);
+    } else {
+      document.body.style.overflow = "";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+
+  return (
+    <div aria-hidden={!open} className={clsx("fixed inset-0 z-50", !open && "pointer-events-none")}>
+      <div
+        className={clsx(
+          "fixed inset-0 bg-black/40 transition-opacity duration-200",
+          open ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+          "motion-reduce:transition-none",
+        )}
+        onClick={onClose}
+        aria-hidden
+      />
+
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal
+        tabIndex={-1}
+        className={clsx(
+          "fixed right-0 bottom-0 left-0 transform border-t bg-popup p-4 transition-transform duration-300 ease-[cubic-bezier(.22,1,.36,1)]",
+          open ? "translate-y-0" : "translate-y-full",
+          "motion-reduce:transform-none motion-reduce:transition-none",
+        )}
+      >
+        <nav className="mt-4 flex flex-col gap-2">
+          <Link to="/components" className="text-sm text-muted-foreground">
+            Components
+          </Link>
+          <Link to="/" className="text-base">
+            Home
+          </Link>
+          <div>
+            <Link to="/components" className="text-base">
+              Components
+            </Link>
+            <div className=" ml-4 flex flex-col">
+              <Suspense fallback={<SuspenseFallback />}>
+                {[...allComponents]
+                  .sort((a, b) => a.title.localeCompare(b.title))
+                  .map((component) => (
+                    <Link
+                      key={component.slug}
+                      to="/components/$slug"
+                      params={{ slug: component.slug }}
+                      className="text-base"
+                    >
+                      {component.title}
+                    </Link>
+                  ))}
+              </Suspense>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  );
+}