Where the numbers thin out, stage by stage
Ordered stages as a centred funnel of trapezoid bands, each one's width its share of the first: the taper itself is the conversion story. Built on the charting library's native funnel, so the stages sweep in on load and hovering a band raises the family's glass tooltip with the stage's reading and percentage. It wears the same card, header, and padding as every other chart, and bare strips them inside a panel that supplies the surface.
Default
Four stages from visit to customer. The first stage always spans the full width; every later band reads as a fraction of it, with its name at its side. Title and subtitle sit in the shared chart header.
Acquisition funnel
Visits through to paying customers
With legend tiles
When a row of legend tiles gives each stage its label and formatted count in the same series order, showLabels turns the in-chart names off so nothing says anything twice. Composed like this, the funnel goes bare and the surrounding panel supplies the surface.
Steep drop-off
A steep drop-off draws exactly as steep as it is: the late stages narrow to slivers of the first, and the tooltip carries each stage's true count and percentage.
// From the npm package
import { FunnelChart } from 'rift-ds/charts';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/funnel-chart.json