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.

3D/WebGL setup (optional)

2D charts work out of the box. For 3D/WebGL charts, install and loadecharts-gl once in your client entry.

pnpm add echarts-gl

'use client'
import 'echarts-gl'

Reference implementation

See a full Next.js dashboard example using this library:

https://shadcn-echarts-demo.devstool.dev/dashboard

Source code: github.com/noobships/shadcn-echarts-demo