Sparkline

A compact inline chart (line, area, or column) that shows a data trend at a glance inside a KPI card, table row, or dashboard header, with an optional hover tooltip and live-updating value/label.

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.

import { Sparkline, SparklineChart } from "@/components/ui/sparkline";

export default function SparklineDefault() {
  return (
    <Sparkline
      data={[8, 14, 10, 18, 15, 22, 19, 27, 24, 31]}
      className="w-64 max-w-full"
    >
      <SparklineChart aria-label="Trend over the last 10 periods" />
    </Sparkline>
  );
}