# Spend Alerts

Budget alert settings: a budget, a threshold, channels, a hard stop and a live preview of the alert.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/spend-alerts
```

## Usage

```tsx
import { SpendAlerts } from '@/components/fetaui/spend-alerts'

export function Example(props) {
  return <SpendAlerts {...props} onSave={save} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| scope, resets, email, channel, pager, edited | string | required |
| spent | number | required |
| forecast | { amount, by } | required |
| defaultBudget | number | 5000 |
| defaultThreshold | number | 80 |
| defaultSaved | boolean | false |
| onSave | ({ budget, threshold }) => void |  |
| onTest | () => void |  |
| animated | boolean | true |

## When to use

- In settings, so people choose when and where they hear about spend.

## When not to use

- For reading spend: use Usage Overview.

## Accessibility

- Every Switch names its channel.
- The threshold is a plain range input, and its value reads as a percent and an amount.
- Saved shows in the header and on the Button.

## Motion

- The panel fades in and rises 8 px over 400 ms, once.
- Rows fade in over 240 ms with a 40 ms stagger.
- Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
- With reduced motion, the panel appears in place and values swap at once.