react-sparklines still renders on React 19, but its last release was in July 2017 and its types live in a separate package. Below is a typed Sparkline in about 80 lines you own: plain SVG, no dependencies, fine in Server Components, colored by a Tailwind text class. For a dashboard full of live KPI sparklines, Orbit is free.
import { useId } from "react";
type SparklineProps = {
data: number[];
width?: number;
height?: number;
/** Any CSS color. Leave it out to use the text color, so a text-emerald-400 class works. */
color?: string;
/** Soft gradient under the line */
fill?: boolean;
/** Dot on the last point */
dot?: boolean;
/** Dashed line at the average */
mean?: boolean;
/** Read out by screen readers, e.g. "Revenue, last 30 days, up 12%". Without it the chart is hidden from them. */
label?: string;
className?: string;
};
export function Sparkline({
data,
width = 120,
height = 32,
color,
fill = true,
dot = true,
mean = false,
label,
className,
}: SparklineProps) {
const id = "spark" + useId().replace(/[^a-zA-Z0-9_-]/g, "");
if (data.length < 2) return null;
const pad = 3;
const min = Math.min(...data);
const max = Math.max(...data);
const span = max - min || 1; // a flat series draws a flat line, not NaN
const y = (v: number) => height - pad - ((v - min) / span) * (height - pad * 2);
const pts = data.map((v, i) => [(i / (data.length - 1)) * width, y(v)] as const);
const line = pts.map(([px, py], i) => `${i ? "L" : "M"}${px.toFixed(1)} ${py.toFixed(1)}`).join("");
const [lx, ly] = pts[pts.length - 1];
const avg = data.reduce((s, v) => s + v, 0) / data.length;
return (
<svg
viewBox={`0 0 ${width} ${height}`}
width={width}
height={height}
className={className}
style={{ color, overflow: "visible" }}
role={label ? "img" : undefined}
aria-label={label}
aria-hidden={label ? undefined : true}
>
{fill && (
<>
<defs>
<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stopColor="currentColor" stopOpacity={0.3} />
<stop offset="1" stopColor="currentColor" stopOpacity={0} />
</linearGradient>
</defs>
<path d={`${line}L${width} ${height}L0 ${height}Z`} fill={`url(#${id})`} />
</>
)}
{mean && (
<line x1={0} x2={width} y1={y(avg)} y2={y(avg)} stroke="currentColor" strokeOpacity={0.4} strokeDasharray="2 3" vectorEffect="non-scaling-stroke" />
)}
<path
d={line}
fill="none"
stroke="currentColor"
strokeWidth={1.5}
strokeLinejoin="round"
strokeLinecap="round"
vectorEffect="non-scaling-stroke"
/>
{dot && <circle cx={lx} cy={ly} r={2.5} fill="currentColor" />}
</svg>
);
}import { Sparkline } from "@/components/sparkline";
type Kpi = { label: string; value: string; delta: number; history: number[] };
export function KpiCard({ label, value, delta, history }: Kpi) {
const up = delta >= 0;
return (
<div className="rounded-xl border border-zinc-800 bg-zinc-950 p-4">
<p className="text-sm text-zinc-400">{label}</p>
<div className="mt-2 flex items-end justify-between gap-3">
<p className="text-2xl font-semibold tabular-nums text-zinc-50">{value}</p>
<Sparkline
data={history}
className={up ? "text-emerald-400" : "text-rose-400"}
label={`${label}, ${up ? "up" : "down"} ${Math.abs(delta)}%`}
/>
</div>
<p className={`mt-1 text-xs ${up ? "text-emerald-400" : "text-rose-400"}`}>
{up ? "+" : "-"}
{Math.abs(delta)}% vs last week
</p>
</div>
);
}import { Sparkline } from "@/components/sparkline";
// Was: <Sparklines data={sales} limit={20}><SparklinesLine color="#22c55e" /><SparklinesSpots /></Sparklines>
export default function Page() {
const sales = [12, 18, 14, 22, 19, 27, 24, 31, 29, 36];
return (
<p className="flex items-center gap-2 text-sm">
Sales this week
<Sparkline data={sales.slice(-20)} color="#22c55e" label="Sales this week, rising" />
</p>
);
}npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.jsonAll comparisons, with prices read on each library's own site.
It rendered on React 19.1 with no console errors in our server-render check, and its peer range is react "*", so npm installs it. It hasn't had a release since July 2017, and the types come from @types/react-sparklines.
Yes. It has no state or effects, and useId is available in Server Components.
Leave color out and put text-emerald-400 or text-rose-400 on it from your own up/down check, as in kpi-card.tsx.
Yes. MIT licence, no email needed for the registry install.
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.