# Pagination
This version is for Radix projects. For Base UI, read [/pagination.md?base=base](/pagination.md?base=base).
Moves between pages of a long list.
```bash
npx shadcn@latest add @wisty/pagination
```
## Examples
- `default` (Page links): Previous, page links with the second marked `isActive`, a `PaginationEllipsis` before the last page, and next.
## When to use
- A list or table has more rows than fit on one page, and people move between pages.
- People need to jump to a page by number, or step to the previous or next one.
## When not to use
- The list grows as people scroll, as Salesforce's list views do. Use Data table, which loads more rows instead.
- There are only two or three steps in a flow. Use Path, or buttons.
- People move between sections of one page. Use Tabs.
## Usage
```text
Pagination
└── PaginationContent
├── PaginationItem
│ └── PaginationPrevious
├── PaginationItem
│ └── PaginationLink
├── PaginationItem
│ └── PaginationEllipsis
└── PaginationItem
└── PaginationNext
```
`Pagination` centers itself in its row. To sit it at the end of a list's footer, beside a count, pass `className="mx-0 w-auto"`:
```tsx
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination"
```
```tsx
26–50 of 132 accounts
2
```
`size` on a link takes Button's sizes: page numbers default to square `icon` buttons, and previous and next to `default`.
## Rules
- Mark exactly one page, the current one, with `isActive`. It sets `aria-current="page"`.
- Give every link an `href` that loads that page, so pages open in a new tab and work without JavaScript.
- Use `PaginationEllipsis` for skipped pages, not a disabled link.
- Don't restyle the links with variant or color classes.
## API reference
| Part | Built on |
| --- | --- |
| `Pagination` | [`