## Pagination (S—077)

Numbered pagination with ellipses, a sliding current-page marker and prev / next arrows.

- URL: https://sundaeui.dev/components/pagination
- Category: Navigation & menus · 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/pagination.json`
- Tags: pages, pagination, table, list, navigation

Shows the first, last and pages around the current one, collapsing the rest into ellipses so it never grows past seven slots and fits a phone.
The current marker slides between numbers instead of jumping, and the arrows dim at either end.

### Usage

```tsx
import { Pagination } from '@/components/sundae/pagination'

<Pagination />
```

### Props

- `total` (`number`, required): Number of pages.
- `page / defaultPage` (`number`, default `1`): Current page (1-based).
- `onPageChange` (`(p: number) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Tables, search results and archives with a known page count.

### When not to use

- Feeds: use infinite scroll or a Load more button.

### Accessibility

- A nav landmark labelled "Pagination"; the current page has aria-current="page".
- Arrow buttons have accessible names and are disabled at the ends.
- Reduced motion removes the movement and keeps every state change.