Dither Funnel
betaA conversion funnel of dithered stage bars that morph between periods, with overall and step conversion per stage.
- Data
- 1 file
- 1 npm package
- Accessibility notes
- Draws on a canvas
Loading the example…
pnpm dlx @dowel-ui/cli add dither-funnelnpm packages installed: class-variance-authority.
import { FUNNEL } from "@/components/ui/dither-funnel";Default
Conversion Funnel Story
Gallery
Pinned Stage
With Visible Table
Static
<DitherFunnel>
| Prop | Type | Default |
|---|---|---|
label (required)What the funnel shows. Names the image, the stages and the data table. | string | — |
stages (required) | readonly DitherFunnelStage[] | — |
activeStageThe pinned stage (controlled); null pins none. | number | null | — |
animate | boolean | true |
categoryLabelData table headers. | string | "Stage" |
cell | number | 3 |
conversionLabel | string | "Conversion" |
defaultActiveStage | number | null | null |
descriptionReplaces the generated summary in the image's accessible name. | string | — |
formatPercentFormats a 0..1 share. Defaults to a whole percentage. | (share: number) => string | wholePercent |
formatValue | (value: number) => string | formatDitherValue |
maxValue of a full-length bar. Defaults to the largest stage. | number | — |
onActiveStageChange | (index: number | null) => void | — |
showTableShow the data table. It is always present for assistive technology. | boolean | false |
size | "sm" | "md" | "lg" | "md" |
stepLabel | string | "Step conversion" |
valueLabel | string | "Value" |
Plus every attribute of <div> except children.
The bars are role="img" with an aria-label giving every stage's value and conversion. Each stage is a button over its bar, showing its name and overall conversion and named with the full breakdown (share of the first stage, step conversion, drop-off); hover or focus fills the text readout and pressing pins it (aria-pressed). The data is always in a table, visually hidden unless showTable is set.
9/9
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — passes
- No fixed widths — passes