# DeFi Overview block

> Dark finance metric card with composed area-and-line chart and day, week, month period tabs

Dark DeFi-style stats card pairing Total Value Locked, Deposits and Borrowed KPIs with a Recharts composed chart of two gradient areas, monotone lines and a custom tooltip. Day, week, month switch via ReUI Card, Tabs. Crypto dashboard.

- Type: Pro block
- Category: [Composed Chart](https://reui.io/blocks/chart/composed-chart.md)
- Page: https://reui.io/blocks/chart/composed-chart/chart-19
- MCP: `get_block("chart-19")`
- Built with: Card, Tabs
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

A hardcoded dark card whose locked total adds the latest deposits and borrowed points, as 2 areas traced by lines with markers

## Agent notes

- Replace `financeData` with values in millions; its x key is named `month` even on the Day and Week rows
- The header prints `totalValueLocked` times 1000 with fixed .15 cents, so it disagrees with the $M axis
- The `Card`, axis ticks and `CustomTooltip` hardcode zinc and slate colors, so the card stays dark in light mode

## When not to use

- One cashflow series whose total sums the months a range picker keeps: use [Cashflow Trend](https://reui.io/blocks/chart/composed-chart/chart-21.md) (`get_block("chart-21")`)
- One tall balance line that marks only its peaks, troughs and a dated event: use [Balance Tracker](https://reui.io/blocks/chart/line-chart/chart-4.md) (`get_block("chart-4")`)

## Install

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

## About Composed Chart blocks

### When to use

- A primary series as a filled area with a goal, baseline or forecast traced as lines on the same axis
- Release health against a baseline, with limit lines and a marker where a rollback happened

### When not to use

- One volume series alone, with no goal or baseline to compare against: use the [Area Chart blocks](https://reui.io/blocks/chart/area-chart.md)
- Two or more series drawn only as strokes across shared time buckets: use the [Line Chart blocks](https://reui.io/blocks/chart/line-chart.md)

### Agent notes

- Areas and lines share one `ComposedChart`, so a new series goes in as an `Area` or a `Line` child with its own `dataKey`

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.