# Pagination

Under the table: "1–25 of 214", rows per page, and previous / page numbers / next. The phone uses Load more at the end of the list.

- **Group:** Data table · **family:** `data-table` · **shadcn:** Pagination
- **Build:** shadcn `Pagination`.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Summary uses an en dash: 1–25 of 214.

## Do

- Keep page in the URL.

## Don't

- Infinite scroll on desktop tables.

## Accessibility

- **Keyboard:** Buttons.
- **ARIA:** `<nav aria-label="Pagination">`; current `aria-current="page"`.
- **Focus:** After paging, focus moves to the table caption.

## Tokens

`--font-voice` `--font-stretch-title` `--s-2` `--text-small` `--muted-foreground` `--s-1` `--r-chip` `--accent` `--accent-foreground` `--text-micro` `--font-code` `--s-3` `--s-4` `--border` `--r-card` `--card` `--foreground` `--w-medium` `--r-control` `--text-btn-sm` `--motion-hover` `--muted` `--ring` `--w-semibold` `--primary`

## Files

`pagination.html` live specimen · `pagination.css` kit rules · `pagination.d.ts` props · full page: `docs/components/pagination/` (phone: `m/`).
