# Browser Usage block

> Browser usage donut with version drill-down, support line flags and a breakdown table

Unique visitors by browser or rendering engine over 7, 30 or 90 days, drilling into versions flagged under a support line, with a previous period ring, share bars and change badges, CSV and summary export. ReUI Frame, Chart, Table, ToggleGroup.

- Type: Pro block
- Category: [Pie Chart](https://web.dev.reui.io/blocks/chart/pie-chart.md)
- Page: https://web.dev.reui.io/blocks/chart/pie-chart/chart-27
- MCP: `get_block("chart-27")`
- Built with: Badge, Button, Button Group, Chart, Dropdown Menu, Empty, Frame, Icon Tile, Progress, Skeleton, Table, Toggle, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Browser share on a donut beside its breakdown table, opening any browser into its versions and flagging those under a support line

## Agent notes

- Replace `VISITS` and `VERSION_MIX` in data.ts; `breakdownOf` derives every share, engine total and version split from them
- `LINES` holds the support line choices and `BROWSERS` the version names each browser opens into; `other` has no versions
- Wire `SNIPPET` to your real tracking tag; the empty state's Copy Tag copies it

## When not to use

- A source split that needs an extra slice for the share left untracked: use [Inflows by Source](https://web.dev.reui.io/blocks/chart/pie-chart/chart-13.md) (`get_block("chart-13")`)
- Inflow sources on a half ring with the total set inside the arc: use [Inflows Gauge](https://web.dev.reui.io/blocks/chart/radial-chart/chart-12.md) (`get_block("chart-12")`)

## 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-27
```

## About Pie Chart blocks

### When to use

- A share of a total split across a few sources or browsers around a donut
- A donut with the total in its center and a row per segment under a period switch
- Spend per category against its budget on a rose, where an overspend breaks a dashed ring

### When not to use

- A single figure measured against a target on an arc gauge: use the [Radial Chart blocks](https://web.dev.reui.io/blocks/chart/radial-chart.md)
- Shares across more than a handful of categories that need exact comparison: use the [Bar Chart blocks](https://web.dev.reui.io/blocks/chart/bar-chart.md)

### Agent notes

- chart-13 and chart-27 draw a recharts `Pie` donut whose `innerRadius` sets the hole; chart-54 draws its rose as its own SVG in budget-rose.tsx

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