# Error Budget Gauge

> bklit's notched gauge reading out an SLO error budget per service: switch services and the number rolls while the notches refill, turning green, amber or red as the budget burns.

- Page: https://devl.dev/components/bklit-gauge-chart
- Kind: component · Charts
- Install: `npx shadcn@latest add https://ui.bklit.com/r/gauge-chart.json`
- npm: motion
- coss ui: segmented-control
- By bklit (MIT): https://ui.bklit.com

## Usage

```tsx
import { ErrorBudgetGaugeCard, type ServiceBudget } from "@/components/bklit-gauge-chart";

const services: ServiceBudget[] = [
  { id: "api", name: "API", slo: 99.95, remaining: 72, burnRate: 0.6, incidents: 1 },
  { id: "web", name: "Web", slo: 99.9, remaining: 38, burnRate: 1.4, incidents: 3 },
  { id: "jobs", name: "Jobs", slo: 99.5, remaining: 11, burnRate: 2.8, incidents: 5 },
];

export default function BklitGaugeChartDemo() {
  return <ErrorBudgetGaugeCard services={services} />;
}
```