Funnel List

Beta

Get Ritla UI

The steps of a flow, how many reached each one, their share of the first step and the change vs last period.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add funnel-list
Also works with shadcn: npx shadcn@latest add @ritla/funnel-list
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

funnel-list.tsx

import { FunnelList } from "@/components/ui/funnel-list";<FunnelList aria-label="Transfer funnel" steps={[{ label: "Opened app", count: 2341, change: 10.7 }, { label: "Sent", count: 258, change: 3.3 }]} />

API reference

FunnelList

Prop	Type	Default	Description
`steps`	`{ label, count, countLabel?, change? }[]`	None	The steps in order; the first is 100%.
`aria-label`	`string`	None	Names the list.

Accessibility

ARIA

An ordered list; the share is text, so the bar is decorative.

Arabic and RTL notes

Mirrors

Bars fill from the right.

Does not mirror

Shares and changes stay left to right.

Numerals: Shares follow numerals on RitlaProvider.
Arabic typography: label-14 Medium step, numeric-14 Medium share.