Funnel
GraphFunnel
Steps get narrower as values drop. Percentages compare to the first step.
Command
pnpm dlx shadcn@latest add <origin>/r/graph-funnel.jsonInstall
Percentages compare to the first step. stage dims the other rows.
- docs12,400
- copy4,10033%
- ship8607%
Signup
Shorter bar width. Same percentage logic.
- visit8,000
- start2,40030%
- verify96012%
- paid1802%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge of the frame. |
| steps | FunnelStep[] | — | label, value, and optional display string for the count. |
| ticks | number | 20 | Width of the first bar, in characters. |
| stage | string | — | Step label to focus. Other rows recede. |
| glyphs | "shade" | "ascii" | "hash" | "bar" | string[] | "shade" | Character set. shade is ·░▒▓█. ascii is .- =#@. Pass a preset or your own characters. |
| corner | string | "+" | Character at each corner of the frame. |
| className | string | — | Passed to the outer frame. |