Spark table — Björk UI

Components•Spark table

Spark table

A metrics table where every row carries its own sparkline and every sparkline shares one crosshair. Scrub any row and the whole table rewinds to that day, with each value counting to it. Up and down select the row drawn in the accent.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/spark-table

How to use

import { SparkTable } from "@/components/bjork-ui/charts/spark-table";<SparkTable  periodLabel="Last 90 days"  rows={[    { id: "mrr", label: "MRR", data: mrr, format: (v) => `$${(v / 1000).toFixed(1)}K` },    { id: "churn", label: "Churn", data: churn, goodDirection: "down" },  ]}/>

Business metrics
Metric	Start of period	Latest	Change
MRR	$183.1K	$222.4K	+21%
Active users	12.7K	12.5K	−1.1%
Conversion	6.6%	6.8%	+2.4%
Churn	3.08%	2.41%	−22%
p95 latency	183 ms	171 ms	−6.7%
NPS	42	43	+1.9%

Components•Spark table

Spark table

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/spark-table

How to use

import { SparkTable } from "@/components/bjork-ui/charts/spark-table";<SparkTable  periodLabel="Last 90 days"  rows={[    { id: "mrr", label: "MRR", data: mrr, format: (v) => `$${(v / 1000).toFixed(1)}K` },    { id: "churn", label: "Churn", data: churn, goodDirection: "down" },  ]}/>