Sparkline

Component 5

About

An animated inline line chart that shows a compact trend next to a value, with pointer and keyboard scrubbing through historical points.

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

Code

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

Usage.tsx

import Sparkline from "@/components/ui/sparkline";

export default function SparklineDemo() {
  return (
    <div className="flex items-center justify-center w-full p-10">
      <Sparkline
        label="Signups"
        data={[12, 18, 15, 22, 30, 27, 34]}
        labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
        value="34"
        change="+26%"
        tone="success"
      />
    </div>
  );
}