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" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Area
          type="monotone"
          dataKey="revenue"
          fill="var(--color-revenue)"
          fillOpacity={0.4}
          stroke="var(--color-revenue)"
        />
      </AreaChart>
    </ChartContainer>
  );
}

Chart Types

• Area Chart — trend visualization
• Bar Chart — comparisons (horizontal/vertical, stacked, grouped)
• Line Chart — time series
• Pie/Donut Chart — proportions
• Radar Chart — multi-variable comparison
• Radial Chart — circular progress

Features

• Theme-aware — works with light/dark mode
• Responsive — adapts to container size
• Accessible — screen reader friendly
• Customizable — you own the code
• Tooltips — built-in hover information
• Legends — chart legend components

Why shadcn/ui Charts

Feature	shadcn Charts	Chart.js	Nivo
React-native	Yes	Wrapper	Yes
Copy-paste	Yes	npm	npm
Theme support	CSS vars	Manual	Props
Accessibility	Built-in	Limited	Good
Customization	Source code	API	API
Dark mode	Automatic	Manual	Props

Get Started

• Documentation
• Examples

---

Charting scraped data? My Apify scrapers deliver chart-ready data. Custom solutions: [e-mail]