# Funnel chart

> Conversion funnel with overall and step-to-step rates.

Component · Pro · https://lodeui.com/components/funnel-chart

## When to use

- Conversion through ordered steps: visit → sign up → pay.

## When not to use

- Unordered categories: use a bar chart.

## Installation

```bash
npx shadcn@latest add @lode/funnel-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { FunnelChart } from "@/components/ui/funnel-chart";

export function Signup() {
  return <FunnelChart steps={[{ label: "Visited", value: 12000 }, { label: "Signed up", value: 1800 }, { label: "Paid", value: 240 }]} />;
}
```

## API reference

### FunnelChart

Bars sized to the first step, with step-to-step drop-off.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `{ label; value }[]` | – | Steps in order. |
| color | `string` | `var(--chart-1)` | Bar color. |

## Accessibility

- Every step prints its value and conversion as text.

## Motion

- Bars grow in sequence.

## Responsive behavior

- Labels stack above bars on phones.

## Performance

- Static after mount.

## Notes for AI

- Values should decrease; the chart doesn't sort.

## Related

- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.