feat: add support for adding devDependencies in the cli (#2419)

* feat(cli): add support for install devDependencies

* chore: add changeset

Author: shadcn

.changeset/violet-roses-live.md

@@ -0,0 +1,5 @@
+---
+"shadcn-ui": minor
+---
+
+add support for devDependencies

apps/www/registry/registry.ts

@@ -60,6 +60,7 @@ const ui: Registry = [
     files: ["ui/carousel.tsx"],
     registryDependencies: ["button"],
     dependencies: ["embla-carousel-react"],
+    devDependencies: ["embla-carousel"],
   },
   {
     name: "checkbox",

apps/www/registry/schema.ts

@@ -4,6 +4,7 @@ export const registrySchema = z.array(
   z.object({
     name: z.string(),
     dependencies: z.array(z.string()).optional(),
+    devDependencies: z.array(z.string()).optional(),
     registryDependencies: z.array(z.string()).optional(),
     files: z.array(z.string()),
     type: z.enum([

packages/cli/src/commands/add.ts

@@ -180,9 +180,10 @@ export const add = new Command()
           await fs.writeFile(filePath, content)
         }
 
+        const packageManager = await getPackageManager(cwd)
+
         // Install dependencies.
         if (item.dependencies?.length) {
-          const packageManager = await getPackageManager(cwd)
           await execa(
             packageManager,
             [
@@ -194,6 +195,21 @@ export const add = new Command()
             }
           )
         }
+
+        // Install devDependencies.
+        if (item.devDependencies?.length) {
+          await execa(
+            packageManager,
+            [
+              packageManager === "npm" ? "install" : "add",
+              "-D",
+              ...item.devDependencies,
+            ],
+            {
+              cwd,
+            }
+          )
+        }
       }
       spinner.succeed(`Done.`)
     } catch (error) {

packages/cli/src/utils/registry/schema.ts

@@ -4,6 +4,7 @@ import * as z from "zod"
 export const registryItemSchema = z.object({
   name: z.string(),
   dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
   registryDependencies: z.array(z.string()).optional(),
   files: z.array(z.string()),
   type: z.enum(["components:ui", "components:component", "components:example"]),