# Evil Charts

> Animated React chart components styled for shadcn/ui and Tailwind CSS

Evil Charts is an open-source library of animated, interactive React chart components built on Recharts and Apache ECharts. Designed to integrate directly with shadcn/ui and Tailwind CSS, components can be added via the shadcn CLI or copied into projects with dark-mode styling and loading states built in.

Website: https://evilcharts.com/

## What it is for

- Add pre-styled, animated charts into a shadcn/ui and Tailwind dashboard
- Display complex data flows using styled Sankey and radar charts
- Show loading shimmer states on dashboard charts while fetching remote data
- Implement interactive chart selections with built-in selection callbacks

## Features

- One-line CLI installation using shadcn registry commands
- Built-in support for area, line, bar, radar, pie, radial, sankey, and composed charts
- Styling tuned for dark mode with glowing effects, gradients, and custom fills
- Standardized loading state prop (\`isLoading\`) with shimmer animations
- Interactive selection support via \`isClickable\` and \`onSelectionChange\` callbacks
- Light and dark color scheme configuration through unified ChartConfig
- Live preview and code snippet toggles in the documentation

## Pricing

Open source. Free and open source

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Code library, Web
- For: React and Next.js developers building modern dashboards
- Alternative to: Recharts, Tremor, shadcn/ui Charts
- Tags: charts, react, shadcn, tailwind, dataviz, recharts

## Why it was saved

- [@abhijitwt, 15 May 2026](https://x.com/abhijitwt/status/2055294658348249523): Gives handcrafted, nicely animated, dark-mode-ready charts (area, line, bar, radar, pie, radial, sankey, composed) that can be dropped into a project instead of building chart styling from scratch.

## Compare

- [Alternatives to Tremor](https://xiry.app/alternatives/tremor.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/evil-charts

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.