For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Funnel Chart

Verified

A funnel chart for drop-off through ordered steps.

When to use

Use when: Drop-off through ordered steps, such as visit, signup, purchase.
Avoid when: The steps are not ordered or do not narrow; use a Bar Chart.

Installation

bunx shelf add chart-funnel

The source lands in src/components/ui/chart-funnel.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Chart from "@/components/ui/chart-funnel";

<FunnelChart aria-label="Checkout funnel">
  <Chart.Tooltip />
  <Funnel data={data} dataKey="count" nameKey="step" />
</FunnelChart>

Built on

Packages: @stylexjs/stylex, recharts
Shelf items: Chart, foundations
Figma: Optional native Figma library. See Designers.

Verified

Size: 1.1 kB gzipped on its own, 83 kB with the Shelf items and packages it builds on. JS and CSS in a production build, without React.
Accessibility: Axe passes on 1 story
Behavior: 1 interaction test in Storybook
React Compiler: Compiles with React Compiler
React Doctor: React Doctor finds nothing