## Spend Limit (S—183)

Set a monthly spend alert by dragging a marker along this month’s usage bar, with a forecast of when you’ll hit it.

- URL: https://sundaeui.dev/components/spend-limit
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/spend-limit.json`
- Tags: budget, usage, cloud, spend-limit, billing, alert

The bar shows spend so far and a dashed forecast to month end. Drag the limit marker (or type a value) and the card says whether, and on what day, the forecast crosses it.
A toggle chooses between just alerting and pausing usage at the limit.

### Usage

```tsx
import { SpendLimit } from '@/components/sundae/spend-limit'

<SpendLimit />
```

### Props

- `spent` (`number`, required): Spend so far this month ($).
- `dayOfMonth / daysInMonth` (`number`, required): For the forecast.
- `defaultLimit` (`number`): Initial limit ($).
- `onSave` (`(s: { limit: number; pause: boolean }) => void`): Called on save.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Usage-based billing: APIs, cloud, AI credits, ads.

### When not to use

- Flat subscriptions.

### Accessibility

- The marker is a slider with currency aria-valuetext; the forecast sentence is a live region.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Adjust limit by $10