Data
Revenue bridge
shadcn add @detent-pro/bridge
Revenue bridge is in Pro. So is everything else.
19 Pro components, 12 whole screens and 1 template. The source lands in your project, yours to change, with every update for life.
Change one and the preview follows.
periodsBridgePeriod[]Requiredtitlestring'Revenue'format(n: number) => stringmoneymutedbooleanonPoint(i: number | null) => voidThrough a ref: period(), point(), sweep(), flick()
usage.tsx
<RevenueBridgeperiods={periods}title="Monthly recurring revenue"/>
A whole page, ready to paste.
page.tsx
"use client"
import { RevenueBridge } from "@/components/detent/components/bridge/RevenueBridge"
import type { BridgePeriod } from "@/components/detent/components/bridge/RevenueBridge"
const periods: BridgePeriod[] = [
{
id: "q3",
label: "Q3",
steps: [
{ label: "Start", value: 1_200_000, total: true },
{ label: "New", value: 240_000 },
{ label: "Expansion", value: 95_000 },
{ label: "Churn", value: -130_000 },
{ label: "End", value: 1_405_000, total: true },
],
},
{
id: "q4",
label: "Q4",
steps: [
{ label: "Start", value: 1_405_000, total: true },
{ label: "New", value: 310_000 },
{ label: "Expansion", value: 120_000 },
{ label: "Churn", value: -90_000 },
{ label: "End", value: 1_745_000, total: true },
],
},
]
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-6">
<div className="w-full max-w-[720px]">
<RevenueBridge title="Recurring revenue" periods={periods} onPoint={(i) => console.log(i)} />
</div>
</main>
)
}