## Subscription Tracker (S—256)

Every recurring charge in one list: monthly or yearly totals, next renewal dates, and items marked to cancel.

- URL: https://sundaeui.dev/components/subscription-tracker
- 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/subscription-tracker.json`
- Tags: savings, budget, renewals, subscriptions, spending, recurring

Rows show service, price, cycle and next charge. The header total flips between per-month and per-year, normalising mixed cycles.
Mark a subscription “to cancel” and the potential savings line updates. Renewals within a week are flagged.

### Usage

```tsx
import { SubscriptionTracker } from '@/components/sundae/subscription-tracker'

<SubscriptionTracker />
```

### Props

- `items` (`Sub[]`, required): Name, price, cycle, next date.
- `today` (`string`): ISO date for “soon” flags.
- `currency` (`string`, default `'USD'`): Currency.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Personal finance apps, bank insights, admin spend views.

### When not to use

- Actually cancelling: link out to each provider.

### Accessibility

- Rows are a list; cancel toggles are checkboxes with the service name.
- Totals and savings are announced.
- Reduced motion removes the movement and keeps every state change.