From 3db8a07b3f132d396d7fb2e50da96156efcb4138 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Fri, 21 Feb 2025 11:49:17 +0400
Subject: [PATCH] feat(shadcn): default to cssVariables: true. add
 --no-css-variables option (#6707)

* feat(shadcn): default to css vars

* chore: changeset

* fix(shadcn): add command
---
 .changeset/great-olives-flow.md      |  5 +++++
 packages/shadcn/src/commands/add.ts  |  9 +++++++++
 packages/shadcn/src/commands/init.ts | 19 ++++++++-----------
 3 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/great-olives-flow.md

diff --git a/.changeset/great-olives-flow.md b/.changeset/great-olives-flow.md
new file mode 100644
index 0000000000..d58ad002ad
--- /dev/null
+++ b/.changeset/great-olives-flow.md
@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+default to css vars. add --no-css-variables
diff --git a/packages/shadcn/src/commands/add.ts b/packages/shadcn/src/commands/add.ts
index c22f7da799..d4da6f8d70 100644
--- a/packages/shadcn/src/commands/add.ts
+++ b/packages/shadcn/src/commands/add.ts
@@ -38,6 +38,7 @@ export const addOptionsSchema = z.object({
   path: z.string().optional(),
   silent: z.boolean(),
   srcDir: z.boolean().optional(),
+  cssVariables: z.boolean(),
 })
 
 export const add = new Command()
@@ -62,6 +63,12 @@ export const add = new Command()
     "use the src directory when creating a new project.",
     false
   )
+  .option(
+    "--no-src-dir",
+    "do not use the src directory when creating a new project."
+  )
+  .option("--css-variables", "use css variables for theming.", true)
+  .option("--no-css-variables", "do not use css variables for theming.")
   .action(async (components, opts) => {
     try {
       const options = addOptionsSchema.parse({
@@ -136,6 +143,7 @@ export const add = new Command()
           silent: true,
           isNewProject: false,
           srcDir: options.srcDir,
+          cssVariables: options.cssVariables,
         })
       }
 
@@ -166,6 +174,7 @@ export const add = new Command()
             silent: true,
             isNewProject: true,
             srcDir: options.srcDir,
+            cssVariables: options.cssVariables,
           })
 
           shouldUpdateAppIndex =
diff --git a/packages/shadcn/src/commands/init.ts b/packages/shadcn/src/commands/init.ts
index 94674f803e..85af1d7e99 100644
--- a/packages/shadcn/src/commands/init.ts
+++ b/packages/shadcn/src/commands/init.ts
@@ -38,6 +38,7 @@ export const initOptionsSchema = z.object({
   silent: z.boolean(),
   isNewProject: z.boolean(),
   srcDir: z.boolean().optional(),
+  cssVariables: z.boolean(),
 })
 
 export const init = new Command()
@@ -61,6 +62,12 @@ export const init = new Command()
     "use the src directory when creating a new project.",
     false
   )
+  .option(
+    "--no-src-dir",
+    "do not use the src directory when creating a new project."
+  )
+  .option("--css-variables", "use css variables for theming.", true)
+  .option("--no-css-variables", "do not use css variables for theming.")
   .action(async (components, opts) => {
     try {
       const options = initOptionsSchema.parse({
@@ -318,21 +325,11 @@ async function promptForMinimalConfig(
           value: color.name,
         })),
       },
-      {
-        type: "toggle",
-        name: "tailwindCssVariables",
-        message: `Would you like to use ${highlighter.info(
-          "CSS variables"
-        )} for theming?`,
-        initial: defaultConfig?.tailwind.cssVariables,
-        active: "yes",
-        inactive: "no",
-      },
     ])
 
     style = options.style ?? "new-york"
     baseColor = options.tailwindBaseColor
-    cssVariables = options.tailwindCssVariables
+    cssVariables = opts.cssVariables
   }
 
   return rawConfigSchema.parse({