feat(shadcn): add --base-color flag (#6864)

shadcn-ui · Mar 5, 2025 · 19665ad · 19665ad
1 parent fc0e8c0
commit 19665ad
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 28 deletions.
diff --git a/.changeset/fluffy-years-knock.md b/.changeset/fluffy-years-knock.md
@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add --base-color flag
diff --git a/packages/shadcn/src/commands/init.ts b/packages/shadcn/src/commands/init.ts
@@ -1,7 +1,11 @@
 import { promises as fs } from "fs"
 import path from "path"
 import { preFlightInit } from "@/src/preflights/preflight-init"
-import { getRegistryBaseColors, getRegistryStyles } from "@/src/registry/api"
+import {
+  BASE_COLORS,
+  getRegistryBaseColors,
+  getRegistryStyles,
+} from "@/src/registry/api"
 import { addComponents } from "@/src/utils/add-components"
 import { TEMPLATES, createProject } from "@/src/utils/create-project"
 import * as ERRORS from "@/src/utils/errors"
@@ -53,6 +57,23 @@ export const initOptionsSchema = z.object({
         message: "Invalid template. Please use 'next' or 'next-monorepo'.",
       }
     ),
+  baseColor: z
+    .string()
+    .optional()
+    .refine(
+      (val) => {
+        if (val) {
+          return BASE_COLORS.find((color) => color.name === val)
+        }
+
+        return true
+      },
+      {
+        message: `Invalid base color. Please use '${BASE_COLORS.map(
+          (color) => color.name
+        ).join("', '")}'`,
+      }
+    ),
 })
 
 export const init = new Command()
@@ -64,8 +85,12 @@ export const init = new Command()
   )
   .option(
     "-t, --template <template>",
-    "the template to use. (next, next-monorepo)",
-    ""
+    "the template to use. (next, next-monorepo)"
+  )
+  .option(
+    "-b, --base-color <base-color>",
+    "the base color to use. (neutral, gray, zinc, stone, slate)",
+    undefined
   )
   .option("-y, --yes", "skip confirmation prompt.", true)
   .option("-d, --defaults,", "use default configuration.", false)
@@ -311,7 +336,7 @@ async function promptForMinimalConfig(
   opts: z.infer<typeof initOptionsSchema>
 ) {
   let style = defaultConfig.style
-  let baseColor = defaultConfig.tailwind.baseColor
+  let baseColor = opts.baseColor
   let cssVariables = defaultConfig.tailwind.cssVariables
 
   if (!opts.defaults) {
@@ -334,7 +359,7 @@ async function promptForMinimalConfig(
         initial: 0,
       },
       {
-        type: "select",
+        type: opts.baseColor ? null : "select",
         name: "tailwindBaseColor",
         message: `Which color would you like to use as the ${highlighter.info(
           "base color"
@@ -347,7 +372,7 @@ async function promptForMinimalConfig(
     ])
 
     style = options.style ?? "new-york"
-    baseColor = options.tailwindBaseColor
+    baseColor = options.tailwindBaseColor ?? baseColor
     cssVariables = opts.cssVariables
   }
 

diff --git a/packages/shadcn/src/registry/api.ts b/packages/shadcn/src/registry/api.ts
@@ -27,6 +27,29 @@ const agent = process.env.https_proxy
 
 const registryCache = new Map<string, Promise<any>>()
 
+export const BASE_COLORS = [
+  {
+    name: "neutral",
+    label: "Neutral",
+  },
+  {
+    name: "gray",
+    label: "Gray",
+  },
+  {
+    name: "zinc",
+    label: "Zinc",
+  },
+  {
+    name: "stone",
+    label: "Stone",
+  },
+  {
+    name: "slate",
+    label: "Slate",
+  },
+] as const
+
 export async function getRegistryIndex() {
   try {
     const [result] = await fetchRegistry(["index.json"])
@@ -75,28 +98,7 @@ export async function getRegistryItem(name: string, style: string) {
 }
 
 export async function getRegistryBaseColors() {
-  return [
-    {
-      name: "neutral",
-      label: "Neutral",
-    },
-    {
-      name: "gray",
-      label: "Gray",
-    },
-    {
-      name: "zinc",
-      label: "Zinc",
-    },
-    {
-      name: "stone",
-      label: "Stone",
-    },
-    {
-      name: "slate",
-      label: "Slate",
-    },
-  ]
+  return BASE_COLORS
 }
 
 export async function getRegistryBaseColor(baseColor: string) {