Chart

Dashboards 5

About

A token-themed line, bar, and area chart for dashboards built on recharts, with a design-system-driven color palette and tooltip.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chart to your project and fits it to your theme.

Code

How Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { LineChart } from "@/components/ui/chart";

export default function ChartDemo() {
  return (
    <div className="w-full max-w-2xl rounded-lg border border-border bg-background p-6">
      <LineChart
        data={[
          { month: "Jan", revenue: 4200, users: 240 },
          { month: "Feb", revenue: 3800, users: 139 },
          { month: "Mar", revenue: 5200, users: 380 },
          { month: "Apr", revenue: 4900, users: 420 },
          { month: "May", revenue: 6100, users: 510 },
        ]}
        xKey="month"
        series={[
          { key: "revenue", label: "Revenue" },
          { key: "users", label: "New users" },
        ]}
      />
    </div>
  );
}