Chartcnby ShadcnDeck
Built for shadcn/ui

Charts for shadcn/ui,
done right

Paste your CSV, see the chart render live, then copy a production-ready component. No config, no account.

View all chartsStar on GitHub
BarLineAreaPieRadar
revenue.csv
New to this?

Get set up in three steps

You don't need to know Recharts or shadcn/ui inside out. Run these two commands once in your project, then copy-paste from any chart page.

  1. 1

    Add the shadcn/ui chart primitive

    This gives your project the chart wrapper, tooltip, and legend components every chart here is built on.

    npx shadcn@latest add chart
  2. 2

    Make sure Recharts is installed

    The actual bars, lines, and shapes are rendered by Recharts under the hood.

    pnpm install recharts
  3. 3

    Copy a chart into your project

    Open any chart below, paste your own data, then hit Copy component and drop the code into a file in your app.

Browse the charts