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
npm install @kind-ui/charts motion rechartsCore 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.
@import "tailwindcss";
@source "../node_modules/@kind-ui/charts/dist";Add a chart
The CLI adds an editable composition to your project. If you have not initialized shadcn yet, run:
npx shadcn@latest initnpx shadcn@latest add @kind-ui/line-chartChoose a chart's Installation section for its command or manual steps.
See Troubleshooting if installation or styling fails.