---
title: Installation
description: how to install evilcharts & use it in your project
image: /og/og-image.png
---

EvilCharts is designed to be a plug-and-play solution for beautiful, interactive charts in your Next.js projects. You don't need any complex setup or high-end configuration—just follow these simple steps to get started with stunning data visualizations in minutes.

## Steps

  
    ### Install Recharts
    
      
        Install Recharts, the charting library that powers EvilCharts. This is a required dependency for all chart components.
        
        Learn more at 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 in your project. This sets up Tailwind CSS, theme configuration, and component structure. Skip this step if you already have shadcn/ui installed.
        
        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 Components
    
      
        Add chart components to your project using the CLI. Replace `{chart-name}` with your desired chart type (e.g., `area-chart`, `bar-chart`, `line-chart`, `pie-chart`). The CLI will install all necessary files and dependencies.
      
      ### npm

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

### yarn

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

### bun

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

### pnpm

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