# Pagination

- Page: <https://kznlabs.github.io/labsUI/components/pagination>

## Pagination (`pagination`, component)

Server-safe page links from page and total: previous/next, ellipsis gaps and a sliding active pill, with numbers that swipe the way you moved. Links by default; buttons with onPageChange. The row keeps a fixed width so it never jumps.

- Install: `npx @kznlabs/labsui add pagination`
- Docs: <https://kznlabs.github.io/labsUI/components/pagination>
- Brings: button-variants, pagination-motion, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<Pagination>` (+ <nav> props): Page links (or buttons) with previous and next. The active pill slides between pages and the
numbers swipe the way you moved. The row keeps its width: gaps become an ellipsis.
  - `page: number`: Current page, from 1.
  - `total: number`: Number of pages.
  - `href?: (page: number) => string` = `(page) => `?page=${page}``: URL of a page, for links that work without JS. Default `?page=N`. Unused with `onPageChange`.
  - `labels?: { previous?: ReactNode; next?: ReactNode; }`: Text of the previous and next controls; phones show the arrows only.
  - `onPageChange?: (page: number) => void`: Called with the picked page; the controls become buttons. From client parents only.
  - `siblings?: number` = `1`: Pages kept on each side of the current one.
- `pageRange(page: number, total: number, siblings?: number) => (number | "…")[]`: Page numbers to render, with `"…"` for gaps. Keeps first, last and `siblings` pages on each
side of `page`, and always returns the same length so the bar never changes width.
Key items by index so each slot stays mounted and its number swipes instead of remounting.
E.g. `pageRange(6, 12)` returns `[1, "…", 5, 6, 7, "…", 12]`.

### Usage

```tsx
<Pagination page={2} total={12} href={(p) => `?page=${p}`} />
```

### Example: posts-pager.tsx

```tsx
import { Pagination } from "@/components/ui/pagination";

// Server page: plain links, so paging works without JavaScript.
export function PostsPager({ page, total }: { page: number; total: number }) {
  return <Pagination page={page} total={total} href={(p) => `/blog?page=${p}`} />;
}
```