feat(shadcn): default to cssVariables: true. add --no-css-variables option (#6707)

* feat(shadcn): default to css vars

* chore: changeset

* fix(shadcn): add command

Author: shadcn

.changeset/great-olives-flow.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+default to css vars. add --no-css-variables

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 =

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({