Revert "feat: remove npm flags" (#5707)

* Revert "feat: remove npm flags (#5686)"

This reverts commit 4ff64ba818.

* chore: temporarily bring back flag

.changeset/calm-bees-train.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+temporarily bring back npm flag

apps/www/content/docs/components/chart.mdx

@@ -4,6 +4,12 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap
 component: true
 ---
 
+<Callout className="mb-6">
+
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
+
+</Callout>
+
 <ComponentPreview
   name="chart-bar-interactive"
   className="-mt-4 [&_.preview]:p-0 [&_.preview]:border-t [&_.preview>div]:shadow-none [&_.preview>div]:border-none [&_.preview>div]:w-full [&_.preview]:lg:min-h-[404px]"
@@ -45,6 +51,12 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 
 ## Installation
 
+<Callout className="mt-4">
+
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
+
+</Callout>
+
 <Tabs defaultValue="cli">
 
 <TabsList>
@@ -83,27 +95,6 @@ npx shadcn@latest add chart
 }
 ```
 
-<Step>
-  To use recharts with React 19 and Next.js 15, you will need to override the
-  `react-is` dependency.{" "}
-</Step>
-
-Add the following to your `package.json`
-
-```json title="package.json"
-"overrides": {
-  "react-is": "^19.0.0-rc-69d4b800-20241021"
-}
-```
-
-Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
-
-<Step>Run `npm install`</Step>
-
-```bash
-npm install
-```
-
 </Steps>
 
 </TabsContent>
@@ -144,27 +135,6 @@ npm install recharts
 }
 ```
 
-<Step>
-  To use recharts with React 19 and Next.js 15, you will need to override the
-  `react-is` dependency.{" "}
-</Step>
-
-Add the following to your `package.json`
-
-```json title="package.json"
-"overrides": {
-  "react-is": "^19.0.0-rc-69d4b800-20241021"
-}
-```
-
-Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
-
-<Step>Run `npm install`</Step>
-
-```bash
-npm install
-```
-
 </Steps>
 
 </TabsContent>

apps/www/content/docs/react-19.mdx

@@ -3,9 +3,7 @@ title: Next.js 15 + React 19
 description: Using shadcn/ui with Next.js 15 and React 19.
 ---
 
-**shadcn/ui is now fully compatible with React 19!**
-
-<Callout className="mt-6">
+<Callout>
   **The following guide applies to any framework that supports React 19**. I
   titled this page "Next.js 15 + React 19" to help people upgrading to Next.js
   15 find it. We are working with package maintainers to help upgrade to React
@@ -144,7 +142,7 @@ To make it easy for you track the progress of the upgrade, I've created a table
 | [react-day-picker](https://www.npmjs.com/package/react-day-picker)                 | ✅     | Works with flag for npm. Work to upgrade to v9 in progress. |
 | [input-otp](https://www.npmjs.com/package/input-otp)                               | ✅     |                                                             |
 | [vaul](https://www.npmjs.com/package/vaul)                                         | ✅     |                                                             |
-| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | ✅     |                                                             |
+| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | 🚧     | See [PR #194](https://github.com/radix-ui/icons/pull/194)   |
 | [cmdk](https://www.npmjs.com/package/cmdk)                                         | ✅     |                                                             |
 
 If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub.

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

@@ -1,8 +1,11 @@
 import { Config } from "@/src/utils/get-config"
+import { getPackageInfo } from "@/src/utils/get-package-info"
 import { getPackageManager } from "@/src/utils/get-package-manager"
+import { logger } from "@/src/utils/logger"
 import { RegistryItem } from "@/src/utils/registry/schema"
 import { spinner } from "@/src/utils/spinner"
 import { execa } from "execa"
+import prompts from "prompts"
 
 export async function updateDependencies(
   dependencies: RegistryItem["dependencies"],
@@ -26,12 +29,52 @@ export async function updateDependencies(
   })?.start()
   const packageManager = await getPackageManager(config.resolvedPaths.cwd)
 
+  // Offer to use --force or --legacy-peer-deps if using React 19 with npm.
+  let flag = ""
+  if (isUsingReact19(config) && packageManager === "npm") {
+    dependenciesSpinner.stopAndPersist()
+    logger.warn(
+      "\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).\n"
+    )
+    const confirmation = await prompts([
+      {
+        type: "select",
+        name: "flag",
+        message: "How would you like to proceed?",
+        choices: [
+          { title: "Use --force", value: "force" },
+          { title: "Use --legacy-peer-deps", value: "legacy-peer-deps" },
+        ],
+      },
+    ])
+
+    if (confirmation) {
+      flag = confirmation.flag
+    }
+  }
+
+  dependenciesSpinner?.start()
+
   await execa(
     packageManager,
-    [packageManager === "npm" ? "install" : "add", ...dependencies],
+    [
+      packageManager === "npm" ? "install" : "add",
+      ...(packageManager === "npm" && flag ? [`--${flag}`] : []),
+      ...dependencies,
+    ],
     {
       cwd: config.resolvedPaths.cwd,
     }
   )
   dependenciesSpinner?.succeed()
 }
+
+function isUsingReact19(config: Config) {
+  const packageInfo = getPackageInfo(config.resolvedPaths.cwd)
+
+  if (!packageInfo?.dependencies?.react) {
+    return false
+  }
+
+  return /^(?:\^|~)?19(?:\.\d+)*(?:-.*)?$/.test(packageInfo.dependencies.react)
+}