# Shadcn Pagination
> Free shadcn/ui pagination for React — previous/next, numbered links, and an ellipsis. With the page-range truncation logic, a controlled pager, a compact variant, a data-table footer, and SEO-friendly links.
Source: https://designrevision.com/components/pagination
The **Shadcn Pagination** is a set of composable controls for paging through results — previous/next, numbered links, and an ellipsis. It is **presentational**: it renders the buttons (styled with `buttonVariants`, no dependency), and **you** supply the page logic. The examples below include that logic — range truncation, a controlled pager, a table footer, and SEO-friendly links.
## Anatomy
```tsx
12
```
`PaginationLink` takes `isActive` (which sets `aria-current="page"`), and `PaginationPrevious` / `PaginationNext` / `PaginationEllipsis` are styled helpers.
## Truncating with an ellipsis
For large totals you don't render every page — show the first, the last, a window around the current page, and ellipses for the gaps:
```tsx
function getPages(current, total) {
const pages = [1]
if (current > 3) pages.push("ellipsis")
for (let p = Math.max(2, current - 1); p <= Math.min(total - 1, current + 1); p++) pages.push(p)
if (current < total - 2) pages.push("ellipsis")
if (total > 1) pages.push(total)
return pages
}
```
The Truncated example renders exactly this.
## Controlled (client-side)
Track the page in state and update on click, disabling the ends:
```tsx
const [page, setPage] = React.useState(1)
{ e.preventDefault(); setPage((p) => Math.max(1, p - 1)) }}
className={cn(page === 1 && "pointer-events-none opacity-50")}
/>
```
## Server pagination & SEO
For crawlable pages, use **real links** with a page query so each page is its own URL and the server renders the right slice:
```tsx
{n}
```
`PaginationLink` already sets `aria-current="page"` on the active item. The SEO links example uses this.
## In a data table
Tables usually want a compact bar — a **rows-per-page** Select with first / previous / next / last icon buttons and a "Page X of Y" label. The Table footer example is that bar, ready to wire to your table state (or TanStack Table's pagination API).
## Accessibility
`Pagination` is a `