# Retention Crossover block

> Channel retention slope chart with a day ruler re-ranking channels from signups to Day N retention

Acquisition channels ranked by signups slope to their rank by users kept, scrubbed from Day 1 to 90 through 3 lifecycle stages, with an insight footer and CSV export. ReUI Frame, Badge; shadcn Slider, ButtonGroup; Recharts. Cohort retention.

- Type: Pro block
- Category: [Slope Chart](https://reui.io/blocks/chart/slope-chart.md)
- Page: https://reui.io/blocks/chart/slope-chart/chart-51
- MCP: `get_block("chart-51")`
- Built with: Badge, Button, Button Group, Chart, Dropdown Menu, Frame, Slider
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

A Play tour that lingers where the retention order swaps, plus rings on the traced line at each channel it passes or is passed by

## Agent notes

- Replace `CHANNELS` in data.ts; `retentionAt` models each channel as a decay from `dayOne` toward `floor`, so swap in measured retention per day
- Keep Day 7 and Day 30 in `DAYS`: `DEFAULT_STEP` and `BANDS` find them with `indexOf`, and the Reset item label hardcodes Day 30
- `BAR_MAX` draws a full retention bar at 75%, just above the seed's 74% peak, so raise it when a channel keeps more of its users

## When not to use

- A weekly retention curve with period tabs, cohort health notes and a cohort table: use [Cohort Retention](https://reui.io/blocks/solutions/analytics/solution-analytics-4.md) (`get_block("solution-analytics-4")`)
- Channels flowing into signups and leaking at each trial stage: use [Trial Journey](https://reui.io/blocks/chart/sankey-chart/chart-49.md) (`get_block("chart-49")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

## About Slope Chart blocks

### When to use

- Rank shifts between 2 orderings of the same items, with each line weighted by the item's volume
- An SRE wallboard that ranks services by traffic against the days of error budget each has left
- A growth review that ranks acquisition channels by signups against the share of users each keeps

### When not to use

- Exact values for several series traced across many dates on a shared time axis: use the [Line Chart blocks](https://reui.io/blocks/chart/line-chart.md)
- Volumes that merge and split as they flow from sources into costs, stages or outcomes: use the [Sankey Chart blocks](https://reui.io/blocks/chart/sankey-chart.md)
- One value per item at a single moment, compared by length with no change in rank: use the [Bar Chart blocks](https://reui.io/blocks/chart/bar-chart.md)

### Agent notes

- `Chart` takes no props and fetches nothing, so every item, rank and value derives from constants in the block's data.ts
- Each item is a Recharts `Line` whose `dataKey` is its id and whose values are row indexes, bent into an S-curve by a custom `shape`
- Export CSV and the copy action confirm with sonner `toast`, so the app needs a mounted Toaster for either message to show

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.