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