Pagination
FREEPage links with ellipses, a sliding current marker, first/last buttons, a compact mode and SEO-friendly hrefs.
Installation
Terminal
npx @bloxa/cli add pagination
# or: npx shadcn@latest add @bloxa/paginationPackages installed automatically: motion
Examples
Variants
API reference
Every component also accepts the props of the element it renders.
Pagination
| Prop | Type | Default | Description |
|---|---|---|---|
| page / defaultPage | number | — | Current page (from 1). |
| pageCount | number | — | Total pages. |
| onPageChange | (page) => void | — | When the page changes. |
| siblings / boundaries | number | 1 / 1 | Pages beside the current one and at the ends. |
| showEdges | boolean | false | First/last buttons. |
| compact | boolean | false | "3 / 12" format. |
| getHref | (page) => string | — | Real links (SEO). |