# Installation

Install Core or add an editable chart with the CLI.

Set up Kind UI charts with React and React DOM `^19.3.0` and Tailwind CSS v4.




### Install the package

```sh
npm install @kind-ui/charts motion recharts
```

Core provides the chart components, interactions and animation. Motion is required even when animation is off.




### Configure Tailwind CSS v4

Add the package to your existing Tailwind CSS entry. The path is relative to your CSS file.



#### React


```css title="src/app.css"
@import "tailwindcss";
@source "../node_modules/@kind-ui/charts/dist";
```



#### Next.js


```css title="app/globals.css"
@import "tailwindcss";
@source "../node_modules/@kind-ui/charts/dist";
```

Use `../../node_modules/@kind-ui/charts/dist` from `src/app/globals.css`. Chart components need a `"use client"` boundary.







### Add a chart

The CLI adds an editable composition to your project. If you have not initialized shadcn yet, run:

```sh
npx shadcn@latest init
```

```sh
npx shadcn@latest add @kind-ui/line-chart
```

Choose a chart's **Installation** section for its command or manual steps.




See [Troubleshooting](https://kindui.dev/charts/docs/guides/troubleshooting/) if installation or styling fails.