build(dependencies): move 'tailwindcss-animate' to devDependencies

apps/www/public/r/styles/default/index.json

@@ -2,10 +2,12 @@
   "name": "default",
   "type": "registry:style",
   "dependencies": [
-    "tailwindcss-animate",
     "class-variance-authority",
     "lucide-react"
   ],
+  "devDependencies": [
+    "tailwindcss-animate"
+  ],
   "registryDependencies": [
     "utils"
   ],

apps/www/public/r/styles/new-york/index.json

@@ -2,10 +2,12 @@
   "name": "new-york",
   "type": "registry:style",
   "dependencies": [
-    "tailwindcss-animate",
     "class-variance-authority",
     "lucide-react"
   ],
+  "devDependencies": [
+    "tailwindcss-animate"
+  ],
   "registryDependencies": [
     "utils"
   ],

apps/www/scripts/build-registry.mts

@@ -491,11 +491,12 @@ async function buildStylesIndex() {
     const targetPath = path.join(REGISTRY_PATH, "styles", style.name)
 
     const dependencies = [
-      "tailwindcss-animate",
       "class-variance-authority",
       "lucide-react",
     ]
 
+    const devDependencies = ["tailwindcss-animate"]
+
     // TODO: Remove this when we migrate to lucide-react.
     // if (style.name === "new-york") {
     //   dependencies.push("@radix-ui/react-icons")
@@ -505,6 +506,7 @@ async function buildStylesIndex() {
       name: style.name,
       type: "registry:style",
       dependencies,
+      devDependencies,
       registryDependencies: ["utils"],
       tailwind: {
         config: {

packages/shadcn/src/utils/add-components.ts

@@ -44,7 +44,7 @@ export async function addComponents(
 
   await updateDependencies(tree.dependencies, config, {
     silent: options.silent,
-  })
+  }, tree.devDependencies)
   await updateFiles(tree.files, config, {
     overwrite: options.overwrite,
     silent: options.silent,

packages/shadcn/src/utils/updaters/update-dependencies.ts

@@ -12,13 +12,16 @@ export async function updateDependencies(
   config: Config,
   options: {
     silent?: boolean
-  }
+  },
+  devDependencies?: RegistryItem["devDependencies"],
 ) {
   dependencies = Array.from(new Set(dependencies))
   if (!dependencies?.length) {
     return
   }
 
+  devDependencies = Array.from(new Set(devDependencies))
+
   options = {
     silent: false,
     ...options,
@@ -67,6 +70,27 @@ export async function updateDependencies(
     }
   )
   dependenciesSpinner?.succeed()
+
+  if (devDependencies?.length) {
+    const devDependenciesSpinner = spinner(`Installing devDependencies.`, {
+      silent: options.silent,
+    })?.start()
+    devDependenciesSpinner?.start()
+
+    await execa(
+      packageManager,
+      [
+        packageManager === "npm" ? "install" : "add",
+        ...(packageManager === "npm" && flag ? [`--${flag}`] : []),
+        "-D",
+        ...devDependencies,
+      ],
+      {
+        cwd: config.resolvedPaths.cwd,
+      }
+    )
+    devDependenciesSpinner?.succeed()
+  }
 }
 
 function isUsingReact19(config: Config) {