Change one and the preview follows.
stagesFunnelStage[]Requiredtone'spectrum' | 'accent''spectrum'goalstring'customers'perstring''reststringheightnumber250compactbooleanfalseonChange(rates: number[]) => voidThrough a ref: set(), reset()
usage.tsx
<FlowFunnelstages={stages}/>
A whole page, ready to paste.
page.tsx
"use client"
import { FlowFunnel } from "@/components/detent/components/funnel/FlowFunnel"
import type { FunnelStage } from "@/components/detent/components/funnel/FlowFunnel"
const stages: FunnelStage[] = [
{ label: "Visitors", value: 48_000 },
{ label: "Signed up", value: 6_200, why: "the form asks for too much" },
{ label: "Activated", value: 2_900, why: "setup takes over ten minutes" },
{ label: "Paying", value: 610, why: "the trial ends before they see value" },
]
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-6">
<div className="w-full max-w-[720px]">
<FlowFunnel
stages={stages}
goal="paying customers"
per="a month"
onChange={(rates) => console.log(rates)}
/>
</div>
</main>
)
}