# Conversion Funnel block

> Conversion Funnel Stacked Area Chart with Stage KPI Tiles and Period Selector

Ecommerce funnel as a stacked area chart over visits, product views, add to cart, and checkout, with four KPI tiles (value plus trend), a 7d/30d/90d/12m period selector, and custom tooltip. ReUI Frame, shadcn ChartContainer and Select.

- Type: Pro block
- Category: [Area Chart](https://reui.io/blocks/chart/area-chart.md)
- Page: https://reui.io/blocks/chart/area-chart/chart-16
- MCP: `get_block("chart-16")`
- Built with: Frame, Select
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

A 4 stage stacked area funnel whose stage tiles read the last point of a 7 day to 12 month Select, with every stage in one tooltip

## Agent notes

- Replace `conversionFunnelData` per `PeriodKey`; the stage tiles show only the last row of the selected period, not a period total
- Trend chips read the hand set `periodChanges`, not a change computed from `conversionFunnelData`
- The 4 `Area` series share one `stackId`, so the top edge plots the sum of all stages, not store visits

## When not to use

- Sales against views on 2 independent scales, one line solid and one dashed: use [Sales vs Traffic](https://reui.io/blocks/chart/line-chart/chart-24.md) (`get_block("chart-24")`)
- Product activation from signup to week 4 retention with a cohort grid below: use [Activation Funnel](https://reui.io/blocks/solutions/analytics/solution-analytics-3.md) (`get_block("solution-analytics-3")`)

## Install

```bash
npx shadcn@latest add @reui/chart-16
```

## About Area Chart blocks

### When to use

- A volume trend over time drawn as a gradient filled area under a headline total and period tabs
- Funnel stages stacked as layered areas so each step reads against the one before it

### When not to use

- A metric judged against a goal, a forecast or a second series drawn as a stroke: use the [Composed Chart blocks](https://reui.io/blocks/chart/composed-chart.md)
- Several KPI tiles, each with a tiny trend tucked under its value: use the [Sparkline blocks](https://reui.io/blocks/chart/sparkline.md)

### Agent notes

- Gradient fills are `linearGradient` defs referenced by id, so a renamed series needs its gradient id renamed too

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.