---
title: Installation
description: install the evilcharts echarts components in your project
image: /og/og-image.png
---

The ECharts provider renders to canvas through Apache ECharts — same config contract, same install flow, built for scale.

## Steps

  
    ### Install ECharts
    
      
        Apache ECharts powers the provider and is required by every ECharts component.

        Learn more at the [ECharts import guide](https://echarts.apache.org/handbook/en/basics/import).
      
      ### npm

```bash
npm install echarts
```

### yarn

```bash
yarn add echarts
```

### bun

```bash
bun add echarts
```

### pnpm

```bash
pnpm add echarts
```
    
  

  
    ### Setup shadcn/ui
    
      
        Initialize shadcn/ui to set up Tailwind CSS, theming, and component structure. Skip this step if you already have it.

        Check out the [shadcn/ui Next.js installation docs](https://ui.shadcn.com/docs/installation/next) for more details.
      
      ### npm

```bash
npx shadcn@latest add init
```

### yarn

```bash
yarn shadcn@latest add init
```

### bun

```bash
bunx --bun shadcn@latest add init
```

### pnpm

```bash
pnpm dlx shadcn@latest add init
```
    
  

  
    ### Add EvilCharts ECharts Components
    
      
        Add components with the CLI. ECharts components are prefixed with `echarts-` — replace `{chart-name}` with a chart type (e.g., `area-chart`, `bar-chart`, `line-chart`, `pie-chart`). Installing one pulls that chart plus the shared `ui` modules it imports, and nothing from Recharts.
      
      ### npm

```bash
npx shadcn@latest add @evilcharts/echarts-{chart-name}
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/echarts-{chart-name}
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/echarts-{chart-name}
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/echarts-{chart-name}
```