# SLO Budgets block

> SLO error budget list with diverging lollipop pins, an attention filter and a New SLO dialog

A Frame list of service level objectives, each row pairing a diverging lollipop pin of error budget left or overspent with a 28-day bead sparkline. A filter, sort, New SLO dialog and CSV or JSON export sit in the header. SLO tracking.

- Type: Pro block
- Category: [Sparkline](https://reui.io/blocks/chart/sparkline.md)
- Page: https://reui.io/blocks/chart/sparkline/chart-44
- MCP: `get_block("chart-44")`
- Built with: Badge, Button, Dialog, Dropdown Menu, Empty, Field, Frame, Hover Card, Icon Tile, Input, Item, Select, Separator, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

An SLO list where each row pairs a diverging budget lollipop with a 28 day bead trend, plus an attention filter, sort and New SLO dialog

## Agent notes

- `handleCreate` adds the `createSlo` record to local `slos` state and fires a `toast`; nothing is persisted
- Replace `RAW_SLOS` in data.ts; `buildSlo` seeds each record's 90 day history from its `id`, so every budget and trend is demo math
- New services need entries in `ServiceId`, `SERVICE_IDS`, `SERVICE_VOLUME`, `SERVICE_ERROR_RATE` and `SERVICE_ICONS`, which `createSlo` and the picker read

## When not to use

- A fuller create form in a side panel with an owner, a threshold and burn alert switches: use [New SLO](https://reui.io/blocks/application/sheet/sheet-21.md) (`get_block("sheet-21")`)
- Objectives in a filterable grid with a detail view and multi select delete: use [SLO Error Budgets](https://reui.io/blocks/solutions/dev-ops/solution-dev-ops-5.md) (`get_block("solution-dev-ops-5")`)

## Install

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

## About Sparkline blocks

### When to use

- Rows of metric tiles, each pairing its value with a sparkline, a meter or a delta
- Health strips for cron jobs, SLOs or data syncs that open with KPI tiles and mini trends
- Metric lists where every row ends in a small trend and a change badge

### When not to use

- Plain KPI numbers that need only a delta badge, an actions menu or a progress bar: use the [Stats blocks](https://reui.io/blocks/application/stats.md)
- One metric that deserves a full width plot with axes and a tooltip: use the [Area Chart blocks](https://reui.io/blocks/chart/area-chart.md)
- A whole overview page that sets a header, summary tiles and a work list around its plots: use the [Dashboard blocks](https://reui.io/blocks/application/dashboard.md)

### Agent notes

- `Chart` takes no props and fetches nothing: every tile value and series comes from constants in the block's own folder

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.