Data
Metric explainer
shadcn addmetric
Like this one? Pro has 19 more.
19 Pro components, 12 whole screens and 1 template. The source lands in your project, yours to change, with every update for life.
metricsMetric[]RequiredmetricstringdefaultMetricstringperiodstringwidthnumber640footerReactNodehighlightstring | nullnulltabsbooleantrueonMetricChange(id: string) => voidusage.tsx
<MetricExplainermetrics={metrics}/>
A whole page, ready to paste.
page.tsx
"use client"
import { MetricExplainer } from "@/components/detent/components/metric/MetricExplainer"
import type { Metric } from "@/components/detent/components/metric/MetricExplainer"
const dollars = (n: number) => `$${Math.round(n).toLocaleString("en-US")}`
const metrics: Metric[] = [
{
id: "burn",
name: "Burn",
value: 84_200,
previous: 71_790,
format: dollars,
vs: "September",
reason: "Burn rose mostly because of the new AWS region, with contractor spend close behind.",
basis: "From 1,284 transactions in the ledger",
drivers: [
{ name: "AWS", note: "the new eu-west region, live since Oct 9", amount: 8_920, phrase: "the new AWS region" },
{ name: "Contractors", note: "two designers for the launch", amount: 5_400, phrase: "contractor spend" },
{ name: "Software", note: "annual renewals moved to monthly", amount: -1_910 },
],
},
{
id: "revenue",
name: "Revenue",
value: 212_500,
previous: 196_300,
format: dollars,
vs: "September",
reason: "Revenue grew on enterprise upgrades, slightly offset by churn in the starter plan.",
drivers: [
{ name: "Enterprise", note: "three accounts moved up a plan", amount: 19_400, phrase: "enterprise upgrades" },
{ name: "Starter churn", note: "41 accounts left", amount: -3_200, phrase: "churn" },
],
},
]
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-6">
<MetricExplainer
metrics={metrics}
defaultMetric="burn"
period="October · as of Oct 28"
onMetricChange={(id) => console.log(id)}
/>
</main>
)
}