shadcn/ui Has Free Beautiful Charts — Here's How to Use Them

Chart.js is old. Recharts is decent but bland. shadcn/ui charts give you stunning, accessible charts built on Recharts — copy-paste into your Next.js app. What Is shadcn/ui Charts? shadcn/ui includes chart components built on Recharts. Like all shadcn/ui components, you copy them into your project and own the code — no npm dependency. Quick Start npx shadcn@latest add chart Area Chart import { ChartContainer , ChartTooltip , ChartTooltipContent } from " @/components/ui/chart " ; import { Area , AreaChart , XAxis } from " recharts " ; const data = [ { month : " Jan " , revenue : 4000 }, { month : " Feb " , revenue : 3000 }, { month : " Mar " , revenue : 5000 }, { month : " Apr " , revenue : 4500 }, { month : " May " , revenue : 6000 }, ]; const chartConfig = { revenue : { label : " Revenue " , color : " hsl(var(--chart-1)) " }, }; export function RevenueChart () { return ( < ChartContainer config = { chartConfig } > < AreaChart data = { data } > < XAxis dataKey = "month" /> < ChartToolt