About
A gradient-filled stacked area chart for comparing two time-series metrics, like inbound vs outbound traffic, with an interactive tooltip.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chart Area to your project and fits it to your theme.
Code
How Chart Area is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import ChartArea from "@/components/ui/chart-area";
export default function ChartAreaDemo() {
return (
<div className="w-full max-w-2xl p-4">
<ChartArea />
</div>
);
}
















