Setup

Prerequisites, and installing a chart with the shadcn CLI.

Prerequisites

RequirementNotes
React 18 or laterReact 19 supported
Tailwind CSSThe components are styled with Tailwind utilities
shadcn/uiOptional, but the components assume its conventions

Install a chart

Charts are distributed through the shadcn registry, so the CLI you already use for shadcn components installs them:

npx shadcn@latest add https://ui.simplifyingai.com/r/line-chart.json

Swap line-chart for the chart you want. The CLI writes the component into your project and pulls in whatever primitives it depends on.

Install everything

To pull the whole library at once:

npx shadcn@latest add https://ui.simplifyingai.com/r/all.json

This is worth doing once in a design-system package, then importing from there across your apps, rather than adding charts one at a time in several repositories.

Verify

Render the chart with its bundled example data before wiring your own. If it draws, your Tailwind content paths and React version are fine, and any later problem is in the data shape rather than the setup.

On this page