# Orders Overview block

> Orders overview card with period tabs, stat tiles, and animated gradient area chart

Analytics overview card with Day, Week, Month, Year range Tabs, three stat tiles showing delta changes, and a recharts area chart with animated reveal and dark tooltip. ReUI Frame, shadcn Tabs, Item. For dashboard revenue or sales summary panels.

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

## Best for

An area that regrows from zero on each Day, Week, Month or Year tab, under 3 task tiles that stay fixed across periods

## Agent notes

- Replace `revenueData` in data.tsx and `statisticsData` in chart.tsx; the 3 tiles are literals that ignore `selectedPeriod`
- `AnimatedRevenueChart` remounts per period and grows from `getRevealStartData` zeros; reduced motion skips straight to the data
- The Orders Overview heading sits over a `revenue` series and task tiles, so retitle it to match your data

## When not to use

- Task completion as one progress bar with backlog, in progress and review counts: use [Task Progress](https://reui.io/blocks/application/stats/stats-9.md) (`get_block("stats-9")`)
- A grid of KPI cells where each figure carries its own small area and delta badge: use [KPI Area Charts](https://reui.io/blocks/application/card/card-29.md) (`get_block("card-29")`)

## Install

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

## 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.