EvilCharts components are installed as source in a Svelte 5 project. Set up LayerChart and
shadcn-svelte once, then add only the charts you need.

## Steps


  
    ### Install LayerChart
    
      

LayerChart powers every EvilCharts component and is a required dependency.

See the [LayerChart getting-started guide](https://www.layerchart.com/docs).


      ### npm

```bash
npm install layerchart
```

### yarn

```bash
yarn add layerchart
```

### bun

```bash
bun add layerchart
```

### pnpm

```bash
pnpm add layerchart
```
    
  

  
    ### Set up shadcn-svelte
    
      

Initialize shadcn-svelte to configure Tailwind CSS, themes, and the component structure. Skip this
step if your project already uses it.

See the [shadcn-svelte installation guide](https://shadcn-svelte.com/docs/installation).


      ### npm

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

### yarn

```bash
yarn dlx shadcn-svelte@latest add init
```

### bun

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

### pnpm

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

  
    ### Add an EvilCharts component
    
      

Add a chart with the CLI. Replace `{chart-name}` with a registry name such as
`layerchart-area-chart`, `layerchart-bar-chart`, `layerchart-line-chart`, or
`layerchart-pie-chart`. The CLI installs the component source and its dependencies.


      ### npm

```bash
npx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/{chart-name}.json
```

### yarn

```bash
yarn dlx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/{chart-name}.json
```

### bun

```bash
bunx --bun shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/{chart-name}.json
```

### pnpm

```bash
pnpm dlx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/{chart-name}.json
```
    
  


After installation, give each chart root an accessible name. The shared `accessibility` prop accepts
a direct `label` or the ID of visible text through `labelledBy`. See
[Accessibility](/docs#accessibility) for the complete example.

## Use with AI agents

Evil Charts for Svelte is available through Context7 MCP. Give your coding agent the exact library
ID <code>/mielsense/evilcharts-sv</code> so it reads this Svelte port instead of the original React
project.

```text
Use Context7 library /mielsense/evilcharts-sv for EvilCharts Svelte docs.
```

[Open the Evil Charts for Svelte Context7 page](https://context7.com/mielsense/evilcharts-sv).