# SLO Error Budget block

> SLO detail sheet with error budget burn-down, burn rate alerts and event exclusions

Service level objective drawer for SRE teams: fast and slow burn alerts, hourly burn on a log axis, 5 burn windows, alert rules and Copy as OpenSLO. ReUI Alert, Badge, Frame, NumberField; shadcn Sheet, Tabs, Chart. Uptime, reliability.

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

## Best for

Burn gauges per window on a log track, Events tab switches that exclude planned work or outages from the budget, and Copy as OpenSLO

## Agent notes

- The sample catalog is `RAW_SLOS`, and `generateSeries` synthesizes each 90 day history from `volume` and `baseBurn`; feed real counts
- Saves, alert mutes, event exclusions, duplicates and deletes live only in `useSloStore` state; persist them in its callbacks
- The demo clock `REFERENCE_MS` pins every label and number to 2026-09-29; read the real time

## When not to use

- A blank objective to define from scratch rather than an existing one to review: use [New SLO](https://web.dev.reui.io/blocks/application/sheet/sheet-21.md) (`get_block("sheet-21")`)
- A console of many SLOs compared together, not one record in a side panel: use [SLO Error Budgets](https://web.dev.reui.io/blocks/solutions/dev-ops/solution-dev-ops-5.md) (`get_block("solution-dev-ops-5")`)

## 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/sheet-20
```

## About Sheet blocks

### When to use

- Record detail opened over a list or table: a ticket, metric, cron job, audit event, deploy, SLO or data source
- Create and edit forms in a side panel for a project, cron job, firewall rule, SLO or data connection
- Utility panels for help guides, keyboard shortcuts, an AI assistant, comments, notifications or view settings

### When not to use

- A bare side panel with your own header, body and footer, nothing prebuilt: use [Sheet](https://web.dev.reui.io/components/sheet.md) (`get_component("sheet")`)
- A persistent sidebar or navigation layout that stays around every page: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- An assistant conversation that fills the whole page rather than a side panel: use the [AI Chat blocks](https://web.dev.reui.io/blocks/ai-agents/ai-chat.md)

### Agent notes

- Each root renders a demo `SheetTrigger` button and opens on mount via `defaultOpen` or a `useState` seeded true; start it closed in your app
- Each `SheetContent` className floats it inset with `inset-y-4`, `right-4` and `rounded-xl` and sets its own width; resize it there, not in the primitive
- Each page.tsx only centers the trigger in a `min-h-svh` main with an `sr-only` h1; render the root component alone inside your page

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.