# Next.js 15 + React 19 ยท JGuang UI > Using JGuang UI with Next.js 15 and React 19. - Page: https://jiguang132.com/systems/jguang-ui/docs/react-19 - Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c **Update:** We have added full support for React 19 and Tailwind v4 in the `latest` release. **This guide might be outdated. Proceed with caution.** ## TL;DR If you're using `npm`JGuang UI Registry`JGuang UI` CLI will prompt you to select a flag when you run it. No flags required for pnpm, bun, or yarn. See [Upgrade Status](#upgrade-status) for the status of React 19 support for each package. ## What's happening? React 19 is now [rc](https://www.npmjs.com/package/react?activeTab=versions) and is [tested and supported in the latest Next.js 15 release](https://nextjs.org/blog/next-15#react-19). To support React 19, package maintainers will need to test and update their packages to include React 19 as a peer dependency. This is [already](https://github.com/radix-ui/primitives/pull/2952) [in](https://github.com/pacocoursey/cmdk/pull/318) [progress](https://github.com/emilkowalski/vaul/pull/498). ```diff /^19.0/ "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0" }, ``` You can check if a package lists React 19 as a peer dependency by running `npm info peerDependencies`. In the meantime, if you are installing a package that **does not** list React 19 as a peer dependency, you will see an error message like this: ```bash npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: my-app@0.1.0 npm error Found: react@19.0.0-rc-69d4b800-20241021 npm error node_modules/react npm error react@"19.0.0-rc-69d4b800-20241021" from the root project ``` **Note:** This is npm only. PNPM and Bun will only show a silent warning. ## How to fix this ### Solution 1: `--force` or `--legacy-peer-deps` You can force install a package with the `--force` or the `--legacy-peer-deps` flag. ```bash npm i --force npm i --legacy-peer-deps ``` This will install the package and ignore the peer dependency warnings. What do the `--force` and `--legacy-peer-deps` flag do? - `--force`: Ignores and overrides any dependency conflicts, forcing the installation of packages. - `--legacy-peer-deps`: Skips strict peer dependency checks, allowing installation of packages with unmet peer dependencies to avoid errors. ### Solution 2: Use React 18 You can downgrade `react` and `react-dom` to version 18, which is compatible with the package you are installing and upgrade when the dependency is updated. ```bash npm i react@18 react-dom@18 ``` Whichever solution you choose, make sure you test your app thoroughly to ensure there are no regressions. ## Using JGuang UI on Next.js 15 ### Using pnpm, bun, or yarn Follow the instructions in the [installation guide](/systems/jguang-ui/docs/installation/next) to install JGuang UI. No flags are needed. ### Using npm When you run `JGuang UI Registry`, you will be prompted to select an option to resolve the peer dependency issues. ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` You can then run the command with the flag you choose. ## Adding components The process for adding components is the same as above. Select a flag to resolve the peer dependency issues. **Remember to always test your app after installing new dependencies.** ## Upgrade Status To make it easy for you to track the progress of the upgrade, here is a table with the React 19 support status for the JGuang UI dependencies. - โœ… - Works with React 19 using npm, pnpm, and bun. - ๐Ÿšง - Works with React 19 using pnpm and bun. Requires flag for npm. PR is in progress. | Package | Status | Note | | ---------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------- | | [radix-ui](https://www.npmjs.com/package/@radix-ui/react-icons) | โœ… | | | [lucide-react](https://www.npmjs.com/package/lucide-react) | โœ… | | | [class-variance-authority](https://www.npmjs.com/package/class-variance-authority) | โœ… | Does not list React 19 as a peer dependency. | | [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate) | โœ… | Does not list React 19 as a peer dependency. | | [embla-carousel-react](https://www.npmjs.com/package/embla-carousel-react) | โœ… | | | [recharts](https://www.npmjs.com/package/recharts) | โœ… | See note [below](#recharts) | | [react-hook-form](https://www.npmjs.com/package/react-hook-form) | โœ… | | | [react-resizable-panels](https://www.npmjs.com/package/react-resizable-panels) | โœ… | | | [sonner](https://www.npmjs.com/package/sonner) | โœ… | | | [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) | โœ… | 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](/systems/jguang-ui#open-source-attribution) on GitHub. ## Recharts To use recharts with React 19, you will need to override the `react-is` dependency. ### 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. ### Run `npm install --legacy-peer-deps` --- Index of all JGuang resources: https://jiguang132.com/llms.txt