mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-24 21:25:55 +00:00
Merge branch 'main' of github.com:shadcn-ui/ui
This commit is contained in:
@@ -4,12 +4,6 @@ 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]"
|
||||
@@ -51,12 +45,6 @@ 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>
|
||||
@@ -95,6 +83,27 @@ 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>
|
||||
@@ -135,6 +144,27 @@ 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>
|
||||
|
||||
@@ -3,7 +3,9 @@ title: Next.js 15 + React 19
|
||||
description: Using shadcn/ui with Next.js 15 and React 19.
|
||||
---
|
||||
|
||||
<Callout>
|
||||
**shadcn/ui is now fully compatible with React 19!**
|
||||
|
||||
<Callout className="mt-6">
|
||||
**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
|
||||
@@ -143,7 +145,7 @@ To make it easy for you track the progress of the upgrade, I've created a table
|
||||
| [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) | ✅ | |
|
||||
| [cmdk](https://www.npmjs.com/package/cmdk) | 🚧 | See [PR #318](https://github.com/pacocoursey/cmdk/pull/318) |
|
||||
| [cmdk](https://www.npmjs.com/package/cmdk) | ✅ | |
|
||||
|
||||
If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub.
|
||||
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @shadcn/ui
|
||||
|
||||
## 2.1.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5686](https://github.com/shadcn-ui/ui/pull/5686) [`4ff64ba`](https://github.com/shadcn-ui/ui/commit/4ff64ba818d15a094547f845ea294c2e1ab208d4) Thanks [@shadcn](https://github.com/shadcn)! - remove flag for npm
|
||||
|
||||
## 2.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "shadcn",
|
||||
"version": "2.1.3",
|
||||
"version": "2.1.4",
|
||||
"description": "Add components to your apps.",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
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"],
|
||||
@@ -29,52 +26,12 @@ 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 (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",
|
||||
...(packageManager === "npm" && flag ? [`--${flag}`] : []),
|
||||
...dependencies,
|
||||
],
|
||||
[packageManager === "npm" ? "install" : "add", ...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)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user