Start

Installation

Install charts and import the public components and stylesheet.

npm install @kind-ui/charts

npm installs the required peers automatically. The package is ESM. Supported peers are React/React DOM ^19.3.0, Recharts ^3.10.1 and Motion ^13.4.6. Motion is required even when animation is disabled.

Imports and CSS

import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

Import the stylesheet once at the application entry. Use public composition parts such as CartesianGrid, XAxis, YAxis, ResponsiveContainer and LabelList. There is no @kind-ui/charts/motion entry. Next applications need a client component boundary when supplying callbacks, refs or state.

Use the complete consumer files on each component page or adapt their chart composition into your app. Supply chart sizing, an accessible name and a complete data alternative. See composition for styling and AI agents for example retrieval and verification.

Kind UI charts

Composable React charts built on Recharts and Motion.

Quickstart

Build a small chart, then add sizing, inspection and composition.

Imports and CSS