# Spending Ring

A monochrome donut. The selected category is ink and thicker, and the center reads it.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/spending-ring
```

## Usage

```tsx
import { SpendingRing } from '@/components/fetaui/spending-ring'

const categories = [
  { name: 'Housing', amount: 1250, delta: 'Same as last month' },
  { name: 'Groceries', amount: 486 },
]

export function Example() {
  return <SpendingRing categories={categories} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| categories | { name, amount, delta? }[] | required |
| title | ReactNode | October spending |
| total | number | sum of amounts |
| value | string |  |
| defaultValue | string | first category |
| onValueChange | (name) => void |  |
| format | (amount) => string | $0.00 |
| formatShort | (amount) => string | $0 |
| animated | boolean | true |

## When to use

- To show how one total splits into a handful of categories.
- When people compare one part at a time.

## When not to use

- For more than about eight categories: use a Bar chart.
- For change over time: use Metric Card.

## Accessibility

- The legend is a radio group and doubles as the data table.
- The ring is an image named with every category and amount.
- The readout updates politely when the selection changes.

## Motion

- Arcs sweep in from 12 o’clock over 600 ms on first view.
- Selecting thickens the arc with a spring and rolls the digits in 240 ms.
- The legend item lifts to 5% ink in 150 ms.
- With reduced motion, the ring appears whole and digits swap in place.