---
title: Installation
description: Install EvilCharts and add charts to your project
image: /og/og-image.png
---

EvilCharts is plug-and-play. Skip the heavy setup—follow these steps to add beautiful, interactive charts to your Next.js project.

## Steps

  
    ### Install Recharts
    
      
        Recharts powers every EvilCharts component and is a required dependency.
        
        See the [Recharts installation guide](https://recharts.github.io/en-US/guide/installation).
      
      ### npm

```bash
npm install recharts
```

### yarn

```bash
yarn add recharts
```

### bun

```bash
bun add recharts
```

### pnpm

```bash
pnpm add recharts
```
    
  
  
  
    ### Setup shadcn/ui
    
      
        Initialize shadcn/ui to set up Tailwind CSS, themes, and component structure. Skip this if it's already installed.
        
        See the [shadcn/ui Next.js installation docs](https://ui.shadcn.com/docs/installation/next).
      
      ### 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 Components
    
      
        Add chart components with the CLI. Replace `{chart-name}` with the chart you want (e.g., `area-chart`, `bar-chart`, `line-chart`, `pie-chart`); it installs all files and dependencies.
      
      ### npm

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

### yarn

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

### bun

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

### pnpm

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