Stage Bars Card
The funnel as a list - one rounded pill per stage over the chart track, name on the left, value and share of the top stage on the right. Widths animate in on mount, hovering a stage darkens its pill and fades the rest, and the headline follows. Takes the same stages as the Funnel Chart Card.
Pipeline
1,180
+2.4%Installation
Stage Bars Card is part of BoardUI Pro.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
Mono
monodrops the per-stage hues for a single ink - mid grey on light, near-white on dark - the reference's mono stage funnel.
{/* Single ink: every pill in one grey (mid grey on light, near-white on dark) */}<StageBarsCard mono />Data
stages is a flat { label, value, color? } list, top of the funnel first. Add a stage and it gets a row and a tile (three tiles per row, the card grows to fit); the label column sizes to the longest name, shares are derived from the first stage. Each stage may carry a 14px icon drawn at the left end inside its bar - showIcons={false} hides them all. The period pill is a dropdown when you pass ranges - each range carries its own data (and optionally delta / headline) and the chart re-animates on selection; onRangeChange lets you fetch instead. With no data props the card ships three demo ranges, which is what the previews above use.
import { RiEyeLine, RiUserAddLine } from "@remixicon/react";
// One entry per stage, top of the funnel first - the same shape FunnelChartCard// takes, plus an optional 14px icon drawn at the left end inside the bar.const stages = [ { label: "Visits", value: 4820, icon: <RiEyeLine className="size-3.5 text-neutral-950" /> }, { label: "Sign-up", value: 3260, icon: <RiUserAddLine className="size-3.5 text-neutral-950" /> }, { label: "Active", value: 2010 }, { label: "Pro", value: 1160 }, { label: "Team", value: 540 }, { label: "Enterprise", value: 180, color: "var(--color-chart-1)" }, // override any colour];
<StageBarsCard title="Pipeline" stages={stages} headline={4820} // optional resting headline (defaults to the first stage) delta={0.024} // "+2.4%" chip range="Last 30 days" // static pill… showIcons // default; false hides the icons without removing them from the data/>
// …or a working period dropdown: each range overrides stages / delta / headline.<StageBarsCard title="Pipeline" ranges={[ { id: "7d", label: "Last 7 days", stages: week, delta: 0.024 }, { id: "30d", label: "Last 30 days", stages: month, delta: 0.061 }, { id: "90d", label: "Last 90 days", stages: quarter, delta: -0.012 }, ]}/>