# Pagination

Pagination that never changes width: the current-page pill slides between slots, page numbers roll like an odometer when the window shifts, and an ellipsis opens into a jump-to-page field.

- Page and source: https://uibrik.com/components/pagination
- Install: `npx shadcn@latest add https://uibrik.com/r/pagination.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { Pagination } from "@/components/uibrik/pagination/pagination"`

Where to use the Pagination React component:

- **Tables and search results**: Pagination that never changes width keeps buttons under the pointer as pages change. Pairs with [Data Table](https://uibrik.com/components/data-table).
- **Blog and product listings**: Numbers rolling like an odometer when the window shifts make long ranges clear.
- **Large admin lists**: An ellipsis opening into a jump-to-page field reaches page 40 without clicking 40 times.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| total | `number` | `24` | Number of pages. |
| siblings | `number` | `1` | Pages shown either side of the current one. |
| boundaries | `number` | `1` | Pages always shown at each end. |
| jump | `boolean` | `true` | An ellipsis opens a field to type a page into. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Height and text size. |
| duration | `number` | `0.35` | How long the pill and the numbers take to move. |
| page / onPageChange | `number / (page) => void` |  | Controlled current page, from 1. |
| defaultPage | `number` | `1` | Page on mount when uncontrolled. |
| label | `string` | `"Pagination"` | Names the navigation for screen readers. |
| className | `string` |  | Classes for the nav. It fills its container and switches to a compact "3 / 20" below 352px. |