Spark Chart

npx shadcn@latest add https://ui.saasflare.io/r/spark-chart.json

pnpm add @saasflare/ui

"use client"import { SparkChart } from "@saasflare/ui"/** An inline area sparkline showing a 14-day MRR trend. */export function Demo() {    return (        <SparkChart            data={[182, 190, 188, 201, 214, 209, 226, 238, 231, 247, 262, 258, 274, 289]}            variant="area"        />    )}

"use client"import { SparkChart } from "@saasflare/ui"/** A sparkline tucked into a KPI tile — its primary use case. */export function Demo() {    return (        <div className="w-full max-w-[14rem] rounded-xl border bg-card p-4">            <p className="text-sm text-muted-foreground">Active users</p>            <div className="mt-1 flex items-end justify-between gap-3">                <span className="text-2xl font-semibold tabular-nums">12,480</span>                <SparkChart                    data={[42, 48, 45, 53, 61, 58, 67, 72, 80]}                    variant="area"                    color="oklch(0.68 0.17 155)"                    width={72}                    height={28}                />            </div>        </div>    )}

"use client"import { SparkChart } from "@saasflare/ui"const series = [8, 12, 9, 15, 18, 14, 22, 19, 26, 24, 31, 29]/** The three visual variants — line, area, and bar — side by side. */export function Demo() {    return (        <div className="flex items-center gap-6">            <div className="flex flex-col items-center gap-1.5">                <SparkChart data={series} variant="line" width={96} height={32} />                <span className="text-xs text-muted-foreground">line</span>            </div>            <div className="flex flex-col items-center gap-1.5">                <SparkChart data={series} variant="area" width={96} height={32} />                <span className="text-xs text-muted-foreground">area</span>            </div>            <div className="flex flex-col items-center gap-1.5">                <SparkChart data={series} variant="bar" width={96} height={32} />                <span className="text-xs text-muted-foreground">bar</span>            </div>        </div>    )}