Install shadcn-echarts

Choose the workflow that fits your project. All methods below are supported.

1) npm package (core library)

pnpm add @devstool/shadcn-echarts echarts react

import { BarChart } from "@devstool/shadcn-echarts"

2) Direct shadcn add URL

Install a single chart component directly from this registry:

npx shadcn@latest add https:shadcn-echarts.devstool.dev/r/line-chart.json

3) Namespace registry in components.json

Add a registry namespace once, then install components with a short name:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "registries": {
    "@devstool": "https:shadcn-echarts.devstool.dev/r/{name}.json"
  }
}

npx shadcn@latest add @devstool/bar-chart

4) Manual copy and ownership

If you want full ownership, copy components fromregistry/default/ into your project and adapt as needed.