# SLO Reliability Index block

> SLO error budget grid and linked lollipop chart with a shared objective and window override

Reliability review of 18 SLOs: Exhausted, At Risk and Healthy tabs, a team filter, Runs Out, Alert and 90 day trend columns, and a 4-tab SLO sheet with burn-down, burn rate, events and edit. ReUI DataGrid, Frame; shadcn Chart, Sheet. SRE, uptime.

- Type: Pro block
- Category: [Advanced](https://reui.io/blocks/data-grid/advanced.md)
- Page: https://reui.io/blocks/data-grid/advanced/data-grid-advanced-4
- Docs (Base UI): https://reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://reui.io/docs/components/radix/data-grid.md
- MCP: `get_block("data-grid-advanced-4")`
- Built with: Alert, Alert Dialog, Avatar, Badge, Button, Button Group, Chart, Data Grid, Dropdown Menu, Empty, Field, Frame, Icon Tile, Input, Input Group, Item, Number Field, Select, Separator, Sheet, Switch, Tabs, Textarea, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Every team's SLOs compared at a shared objective and window you pick, ranked worst first with chart hover lighting the grid row

## Agent notes

- `RAW_SLOS` holds 18 sample SLOs and `generateSeries` invents each one's 90 daily counts and hourly burn, seeded by its id; load real SLI data
- `indexRowOf` reads all 90 entries of `days` plus counted `events` under each `Lens`, so every SLO needs a full daily history, oldest first
- `REFERENCE_MS` pins the demo's now to 2026-09-29 14:20 UTC for every window and the footer's Evaluated time; set it to your evaluation time

## When not to use

- A full SLO console with KPI tiles and a burn-down panel above the objectives: use [SLO Error Budgets](https://reui.io/blocks/solutions/dev-ops/solution-dev-ops-5.md) (`get_block("solution-dev-ops-5")`)
- One SLO's detail drawer on its own, opened from a list you already have: use [SLO Error Budget](https://reui.io/blocks/application/sheet/sheet-20.md) (`get_block("sheet-20")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- 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/data-grid-advanced-4
```

## About Advanced blocks

### When to use

- Reporting tables whose rows carry in-cell bars, sparklines or heat cells beside the figures
- Performance reviews that weigh each record against a target, a plan or a prior period
- Record lists with create, edit, delete and undo, where each row opens a tabbed detail sheet

### When not to use

- A rule builder on its own, to narrow a list or table you already have: use [Filters](https://reui.io/components/filters.md) (`get_component("filters")`)
- A plain sortable table of text cells, assembled from parts in your own layout: use [Data Grid](https://reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Values typed into the cells themselves, with validation and a save or discard bar: use the [Editing blocks](https://reui.io/blocks/data-grid/editing.md)

### Agent notes

- Rows live in a client store hook whose `create`, `update` and `remove` change only browser state; back them with your API
- Search, filters and sort run in the browser over every row before `useTable` sees them; move that query to your API at scale
- Each page.tsx wraps the block in a `min-h-svh` main with padding, a `max-w-7xl` width and an sr-only `h1`; drop that wrapper inside an app shell

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.