## Watchlist (S—219)

A stock watchlist with sparklines: sort by name, price or change, toggle % and $ change, and remove with undo.

- URL: https://sundaeui.dev/components/watchlist
- 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/watchlist.json`
- Tags: portfolio, stocks, sort, sparkline, finance, watchlist

Each row has a ticker, a mini sparkline, the price and the day’s change. Tap the change pill to flip between percent and absolute for every row.
Column headers sort; tapping again reverses. Edit mode shows remove buttons, with undo for the last removal.

### Usage

```tsx
import { Watchlist } from '@/components/sundae/watchlist'

<Watchlist />
```

### Props

- `items` (`{ sym: string; name: string; price: number; prev: number; spark: number[] }[]`, required): Rows.
- `currency` (`string`, default `'USD'`): Currency.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Brokerage and crypto apps, finance dashboards.

### When not to use

- Full portfolio views with positions and P&L.

### Accessibility

- Sort headers are buttons with aria-sort on the active one.
- Change is announced as “up 1.2%” or “down 0.4%”, never colour alone.
- Reduced motion removes the movement and keeps every state change.