## Savings Goal (S—126)

A goal card with a progress ring; quick-add chips count the saved amount up and mark the goal done at 100%.

- URL: https://sundaeui.dev/components/savings-goal
- Category: Cards & data visualization · 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/savings-goal.json`
- Tags: savings, budget, goal, progress, finance, ring

The ring fills in proportion to the goal and the amount counts up whenever money is added. Quick-add chips cover the common amounts.
Below the ring, a line says what is left and what that means per week before the target date.

### Usage

```tsx
import { SavingsGoal } from '@/components/sundae/savings-goal'

<SavingsGoal />
```

### Props

- `goal` (`number`, required): Target in cents.
- `saved / defaultSaved` (`number`): Saved so far in cents.
- `due` (`Date`): Target date.
- `onAdd` (`(cents: number) => void`): Called on add.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Personal finance, fundraising, team targets.

### When not to use

- Open-ended totals with no target.

### Accessibility

- The ring is a progressbar with the amount and percent as aria-valuetext.
- Reaching the goal is announced.
- Reduced motion removes the movement and keeps every state change.