@srcroot/ui 0.0.11 → 0.0.12

package/dist/index.js

@@ -250,7 +250,7 @@ var THEMES = {
     }
   }
 };
-function generateCssVariables(themeName) {
+function generateCssVariablesV3(themeName) {
   const theme = THEMES[themeName];
   if (!theme) return "";
   const lightVars = Object.entries(theme.light).map(([key, value]) => `    --${key}: ${value};`).join("\n");
@@ -263,10 +263,31 @@ function generateCssVariables(themeName) {
   :root {
 ${lightVars}
     --radius: 0.5rem;
+    --sidebar-width: 16rem;
+    --sidebar-width-mobile: 18rem;
+    --sidebar-width-collapsed: 3rem;
+    --sidebar-width-icon: 3rem;
+    --header-height: 3.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
 ${darkVars}
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 
@@ -297,6 +318,109 @@ ${darkVars}
 }
 `;
 }
+function generateCssVariablesV4(themeName) {
+  const theme = THEMES[themeName];
+  if (!theme) return "";
+  const lightVars = Object.entries(theme.light).map(([key, value]) => `  --${key}: ${value};`).join("\n");
+  const darkVars = Object.entries(theme.dark).map(([key, value]) => `    --${key}: ${value};`).join("\n");
+  const lightVarsHsl = Object.entries(theme.light).map(([key, value]) => `  --${key}: hsl(${value});`).join("\n");
+  const darkVarsHsl = Object.entries(theme.dark).map(([key, value]) => `    --${key}: hsl(${value});`).join("\n");
+  return `@import "tailwindcss";
+
+:root {
+${lightVarsHsl}
+  --radius: 0.5rem;
+  --sidebar-width: 16rem;
+  --sidebar-width-mobile: 18rem;
+  --sidebar-width-collapsed: 3rem;
+  --sidebar-width-icon: 3rem;
+  --header-height: 3.5rem;
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+}
+
+@theme inline {
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  
+  /* Accordion Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to { height: 0; }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+${darkVarsHsl}
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+`;
+}
 var TAILWIND_CONFIG = `import type { Config } from "tailwindcss"
 
 const config: Config = {
@@ -348,21 +472,45 @@ const config: Config = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
     },
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 }
 
 export default config
 `;
 async function init(options) {
   const cwd = path.resolve(options.cwd);
-  console.log(chalk.cyan("\n\u{1F680} Initializing srcroot-ui...\n"));
+  const userAgent = process.env.npm_config_user_agent || "";
+  const isYarn = userAgent.includes("yarn");
+  const isPnpm = userAgent.includes("pnpm");
+  const isBun = userAgent.includes("bun");
+  const packageManager = isPnpm ? "pnpm" : isYarn ? "yarn" : isBun ? "bun" : "npm";
+  const installCmd = isPnpm ? "add" : isYarn ? "add" : isBun ? "add" : "install";
+  console.log(chalk.cyan("\n\u{1F680} Initializing @srcroot/ui...\n"));
   const packageJsonPath = path.join(cwd, "package.json");
   if (!fs.existsSync(packageJsonPath)) {
     console.log(chalk.red("Error: No package.json found. Please run this in a project directory."));
     process.exit(1);
   }
+  const pkg = await fs.readJson(packageJsonPath);
+  const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+  const tailwindVersion = allDeps["tailwindcss"] || "";
+  const isTailwind4 = tailwindVersion.includes("^4") || tailwindVersion.startsWith("4") || allDeps["@tailwindcss/postcss"];
   const srcDir = fs.existsSync(path.join(cwd, "src")) ? path.join(cwd, "src") : cwd;
   const appDir = path.join(srcDir, "app");
   const isAppRouter = fs.existsSync(appDir);
@@ -397,16 +545,20 @@ async function init(options) {
     spinner.start(`Setting up ${chalk.cyan(THEMES[selectedTheme].name)} theme...`);
     const stylesDir = path.dirname(globalsPath);
     await fs.ensureDir(stylesDir);
-    const cssContent = generateCssVariables(selectedTheme);
+    const cssContent = isTailwind4 ? generateCssVariablesV4(selectedTheme) : generateCssVariablesV3(selectedTheme);
     await fs.writeFile(globalsPath, cssContent);
-    spinner.succeed(`Updated ${chalk.cyan(path.relative(cwd, globalsPath))} with ${chalk.cyan(THEMES[selectedTheme].name)} theme`);
-    spinner.start("Setting up Tailwind config...");
-    const tailwindConfigPath = path.join(cwd, "tailwind.config.ts");
-    await fs.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
-    spinner.succeed(`Created ${chalk.cyan("tailwind.config.ts")}`);
+    spinner.succeed(`Updated ${chalk.cyan(path.relative(cwd, globalsPath))} with ${chalk.cyan(THEMES[selectedTheme].name)} theme (${isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
+    if (!isTailwind4) {
+      spinner.start("Setting up Tailwind config...");
+      const tailwindConfigPath = path.join(cwd, "tailwind.config.ts");
+      await fs.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+      spinner.succeed(`Created ${chalk.cyan("tailwind.config.ts")}`);
+    } else {
+      spinner.info(`Tailwind 4 detected - skipping ${chalk.cyan("tailwind.config.ts")}`);
+    }
     spinner.start("Checking dependencies...");
-    const pkg = await fs.readJson(packageJsonPath);
-    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    const currentPkg = await fs.readJson(packageJsonPath);
+    const currentDeps = { ...currentPkg.dependencies, ...currentPkg.devDependencies };
     const missing = [];
     const requiredDeps = {
       "clsx": "clsx@2.1.1",
@@ -414,21 +566,24 @@ async function init(options) {
       "class-variance-authority": "class-variance-authority@0.7.1",
       "lucide-react": "lucide-react@0.561.0"
     };
-    for (const [depName, installCmd] of Object.entries(requiredDeps)) {
-      if (!deps[depName]) {
-        missing.push(installCmd);
+    if (!isTailwind4) {
+      requiredDeps["tailwindcss-animate"] = "tailwindcss-animate";
+    }
+    for (const [depName, installCmd2] of Object.entries(requiredDeps)) {
+      if (!currentDeps[depName]) {
+        missing.push(installCmd2);
       }
     }
     if (missing.length > 0) {
-      spinner.text = `Installing dependencies: ${missing.join(", ")}...`;
+      spinner.text = `Installing dependencies via ${packageManager}: ${missing.join(", ")}...`;
       try {
         const { execSync } = await import("child_process");
-        execSync(`npm install ${missing.join(" ")}`, { stdio: "ignore", cwd });
+        execSync(`${packageManager} ${installCmd} ${missing.join(" ")}`, { stdio: "ignore", cwd });
         spinner.succeed("Dependencies installed");
       } catch {
         spinner.fail("Failed to install dependencies automatically");
         console.log(chalk.dim(`
-Please manually run: npm install ${missing.join(" ")}
+Please manually run: ${packageManager} ${installCmd} ${missing.join(" ")}
 `));
       }
     } else {
@@ -436,6 +591,7 @@ Please manually run: npm install ${missing.join(" ")}
     }
     console.log(chalk.green("\n\u2705 Project initialized successfully!\n"));
     console.log(`Theme: ${chalk.cyan(THEMES[selectedTheme].name)}`);
+    console.log(`Tailwind: ${chalk.cyan(isTailwind4 ? "v4" : "v3")}`);
     console.log("\nNext steps:");
     console.log(chalk.dim("  npx @srcroot/ui add button"));
     console.log(chalk.dim("  npx @srcroot/ui add --all"));
@@ -833,7 +989,7 @@ async function add(components, options) {
   }
   if (invalidComponents.length > 0) {
     console.log(chalk2.red(`Unknown components: ${invalidComponents.join(", ")}`));
-    console.log(chalk2.dim("\nRun 'srcroot-ui list' to see available components."));
+    console.log(chalk2.dim("\nRun '@srcroot/ui list' to see available components."));
     process.exit(1);
   }
   const toInstall = /* @__PURE__ */ new Set();
@@ -923,13 +1079,13 @@ async function list() {
     });
     console.log();
   }
-  console.log(chalk3.dim("Usage: npx srcroot-ui add <component>\n"));
+  console.log(chalk3.dim("Usage: npx @srcroot/ui add <component>\n"));
 }
 
 // src/cli/index.ts
 var program = new Command();
-program.name("@srcroot/ui").description("Add polymorphic, accessible UI components to your project").version("0.0.8");
-program.command("init").description("Initialize your project with srcroot-ui").option("-y, --yes", "Skip confirmation prompts", false).option("-t, --theme <theme>", "Color theme (slate, neutral, stone, zinc, gray)").option("--cwd <path>", "Working directory", process.cwd()).action(init);
+program.name("@srcroot/ui").description("Add polymorphic, accessible UI components to your project").version("0.0.12");
+program.command("init").description("Initialize your project with @srcroot/ui").option("-y, --yes", "Skip confirmation prompts", false).option("-t, --theme <theme>", "Color theme (slate, neutral, stone, zinc, gray)").option("--cwd <path>", "Working directory", process.cwd()).action(init);
 program.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip confirmation prompts", false).option("-o, --overwrite", "Overwrite existing files", false).option("-a, --all", "Add all available components", false).option("--cwd <path>", "Working directory", process.cwd()).action(add);
 program.command("list").description("List all available components").action(list);
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "A shadcn-style CLI UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {

package/registry/design-tokens.css

@@ -103,8 +103,19 @@
        COMPONENT TOKENS
        ======================================== */
         --sidebar-width: 16rem;
-        --sidebar-width-collapsed: 3.5rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
         --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
     }
 
     /* ========================================
@@ -142,6 +153,15 @@
         --input: 217.2 32.6% 17.5%;
         --ring: 212.7 26.8% 83.9%;
 
+        --sidebar-background: 240 5.9% 10%;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+
         --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
         --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4);
         --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);

package/registry/sidebar.tsx

@@ -8,9 +8,7 @@ import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
+
 
 const SidebarContext = React.createContext<{
     state: "expanded" | "collapsed"
@@ -87,8 +85,6 @@ const SidebarProvider = React.forwardRef<
             <div
                 style={
                     {
-                        "--sidebar-width": SIDEBAR_WIDTH,
-                        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                         ...style,
                     } as React.CSSProperties
                 }
@@ -131,7 +127,7 @@ const Sidebar = React.forwardRef<
             return (
                 <div
                     className={cn(
-                        "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+                        "flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground",
                         className
                     )}
                     ref={ref}
@@ -148,10 +144,10 @@ const Sidebar = React.forwardRef<
                     <SheetContent
                         data-sidebar="sidebar"
                         data-mobile="true"
-                        className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+                        className="w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
                         style={
                             {
-                                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+                                "--sidebar-width": "var(--sidebar-width-mobile)",
                             } as React.CSSProperties
                         }
                         side={side}
@@ -181,26 +177,26 @@ const Sidebar = React.forwardRef<
                 {/* Visual Gap for Sidebar (Fixed placeholder) */}
                 <div
                     className={cn(
-                        "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+                        "duration-200 relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] ease-linear",
                         "group-data-[collapsible=offcanvas]:w-0",
                         "group-data-[side=right]:rotate-180",
                         variant === "floating" || variant === "inset"
-                            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-                            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+                            ? "group-data-[collapsible=icon]:!w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+                            : "group-data-[collapsible=icon]:!w-[var(--sidebar-width-icon)]"
                     )}
                 />
 
                 {/* Actual Fixed Sidebar */}
                 <div
                     className={cn(
-                        "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+                        "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] ease-linear md:flex",
                         side === "left"
                             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
                             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
                         // Adjustments for floating/inset
                         variant === "floating" || variant === "inset"
-                            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+_2px)]"
-                            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+                            ? "p-2 group-data-[collapsible=icon]:!w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+_2px)]"
+                            : "group-data-[collapsible=icon]:!w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
                         className
                     )}
                     {...props}

package/registry/themes/gray.css

@@ -43,6 +43,21 @@
         --ring: 224 71.4% 4.1%;
 
         --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 224 71.4% 4.1%;
+        --sidebar-primary: 220.9 39.3% 11%;
+        --sidebar-primary-foreground: 210 20% 98%;
+        --sidebar-accent: 220 14.3% 95.9%;
+        --sidebar-accent-foreground: 220.9 39.3% 11%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 224 71.4% 4.1%;
     }
 
     .dark {
@@ -82,5 +97,14 @@
         --border: 215 27.9% 16.9%;
         --input: 215 27.9% 16.9%;
         --ring: 216 12.2% 83.9%;
+
+        --sidebar-background: 224 71.4% 10%;
+        --sidebar-foreground: 210 20% 98%;
+        --sidebar-primary: 210 20% 98%;
+        --sidebar-primary-foreground: 220.9 39.3% 11%;
+        --sidebar-accent: 215 27.9% 16.9%;
+        --sidebar-accent-foreground: 210 20% 98%;
+        --sidebar-border: 215 27.9% 16.9%;
+        --sidebar-ring: 216 12.2% 83.9%;
     }
 }

package/registry/themes/neutral.css

@@ -43,6 +43,21 @@
         --ring: 0 0% 3.9%;
 
         --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 0 0% 3.9%;
+        --sidebar-primary: 0 0% 9%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 0 0% 96.1%;
+        --sidebar-accent-foreground: 0 0% 9%;
+        --sidebar-border: 0 0% 89.8%;
+        --sidebar-ring: 0 0% 3.9%;
     }
 
     .dark {
@@ -82,5 +97,14 @@
         --border: 0 0% 14.9%;
         --input: 0 0% 14.9%;
         --ring: 0 0% 83.1%;
+
+        --sidebar-background: 0 0% 10%;
+        --sidebar-foreground: 0 0% 98%;
+        --sidebar-primary: 0 0% 98%;
+        --sidebar-primary-foreground: 0 0% 9%;
+        --sidebar-accent: 0 0% 14.9%;
+        --sidebar-accent-foreground: 0 0% 98%;
+        --sidebar-border: 0 0% 14.9%;
+        --sidebar-ring: 0 0% 83.1%;
     }
 }

package/registry/themes/slate.css

@@ -43,6 +43,21 @@
         --ring: 222.2 84% 4.9%;
 
         --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 222.2 84% 4.9%;
+        --sidebar-primary: 222.2 47.4% 11.2%;
+        --sidebar-primary-foreground: 210 40% 98%;
+        --sidebar-accent: 210 40% 96.1%;
+        --sidebar-accent-foreground: 222.2 47.4% 11.2%;
+        --sidebar-border: 214.3 31.8% 91.4%;
+        --sidebar-ring: 222.2 84% 4.9%;
     }
 
     .dark {
@@ -82,5 +97,14 @@
         --border: 217.2 32.6% 17.5%;
         --input: 217.2 32.6% 17.5%;
         --ring: 212.7 26.8% 83.9%;
+
+        --sidebar-background: 222.2 84% 10%;
+        --sidebar-foreground: 210 40% 98%;
+        --sidebar-primary: 210 40% 98%;
+        --sidebar-primary-foreground: 222.2 47.4% 11.2%;
+        --sidebar-accent: 217.2 32.6% 17.5%;
+        --sidebar-accent-foreground: 210 40% 98%;
+        --sidebar-border: 217.2 32.6% 17.5%;
+        --sidebar-ring: 212.7 26.8% 83.9%;
     }
 }

package/registry/themes/stone.css

@@ -43,6 +43,21 @@
         --ring: 24 9.8% 10%;
 
         --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 24 9.8% 10%;
+        --sidebar-primary: 24 9.8% 10%;
+        --sidebar-primary-foreground: 60 9.1% 97.8%;
+        --sidebar-accent: 60 4.8% 95.9%;
+        --sidebar-accent-foreground: 24 9.8% 10%;
+        --sidebar-border: 20 5.9% 90%;
+        --sidebar-ring: 24 9.8% 10%;
     }
 
     .dark {
@@ -82,5 +97,14 @@
         --border: 12 6.5% 15.1%;
         --input: 12 6.5% 15.1%;
         --ring: 24 5.7% 82.9%;
+
+        --sidebar-background: 24 9.8% 14%;
+        --sidebar-foreground: 60 9.1% 97.8%;
+        --sidebar-primary: 60 9.1% 97.8%;
+        --sidebar-primary-foreground: 24 9.8% 10%;
+        --sidebar-accent: 12 6.5% 15.1%;
+        --sidebar-accent-foreground: 60 9.1% 97.8%;
+        --sidebar-border: 12 6.5% 15.1%;
+        --sidebar-ring: 24 5.7% 82.9%;
     }
 }

package/registry/themes/zinc.css

@@ -43,6 +43,21 @@
         --ring: 240 10% 3.9%;
 
         --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
     }
 
     .dark {
@@ -82,5 +97,14 @@
         --border: 240 3.7% 15.9%;
         --input: 240 3.7% 15.9%;
         --ring: 240 4.9% 83.9%;
+
+        --sidebar-background: 240 5.9% 10%;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
     }
 }