## Pull to Refresh (S—153)

Pull a list down past a threshold: the arrow rotates to say “release”, a spinner holds while loading, new rows slide in.

- URL: https://sundaeui.dev/components/pull-to-refresh
- Category: UI components · 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/pull-to-refresh.json`
- Tags: feed, gesture, list, loading, pull-to-refresh, mobile

Drag down from the top of the list with resistance. Past the threshold the arrow flips and the hint changes to Release; letting go holds the indicator while your loader runs.
New rows animate in at the top. A Refresh button provides the same action without the gesture.

### Usage

```tsx
import { PullToRefresh } from '@/components/sundae/pull-to-refresh'

<PullToRefresh />
```

### Props

- `onRefresh` (`() => Promise<T[]>`, required): Loads new items.
- `items` (`T[]`, required): Current items.
- `threshold` (`number`, default `64`): Pull distance in px.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Feeds, inboxes and lists on touch devices.

### When not to use

- Desktop-only lists: a refresh button is enough.

### Accessibility

- A visible Refresh button offers the same action; status changes are announced.
- Reduced motion removes the movement and keeps every state change.