About
A card that renders line, bar, or pie charts from a static data array, with automatic key detection, per-series colors, number/currency/percent formatting, and built-in loading, empty, and error states.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Charts to your project and fits it to your theme.
Code
How Charts is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { Charts } from "@/components/ui/charts";
const data = [
{ month: "Jan", direct: 120, referral: 84 },
{ month: "Feb", direct: 148, referral: 96 },
{ month: "Mar", direct: 172, referral: 118 },
{ month: "Apr", direct: 196, referral: 132 },
{ month: "May", direct: 214, referral: 151 },
];
export default function RevenueCharts() {
return (
<Charts
title="Monthly signups"
description="Static AI-provided chart data."
data={data}
xKey="month"
series={[
{ key: "direct", label: "Direct" },
{ key: "referral", label: "Referral" },
]}
availableChartTypes={["line", "bar"]}
defaultChartType="line"
/>
);
}
Dependencies
More by Ahmed Shobky
View all
Text Editor Card
5