Pagination Pill
Pagination
Source and install need .
pnpm dlx shadcn@latest add @assembli/paginationPagination
Classic numbered pagination with siblings, boundaries and ellipses that never shift the controls, Previous and Next that drop to icons in narrow containers, aria-current, and links or buttons. Also exports TablePagination, a table footer with rows per page, "21–40 of 312" and first, previous, next and last, plus SimplePagination for "Page 3 of 16".
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
page
number
The current page, 1-based. Pass with
onPageChangeto control it.defaultPage
number
Default
1onPageChange
(page: number) => void
getHref
(page: number) => string
Turns every control into a link, for server-rendered or crawlable lists.
size
Size
Default
"md"pageCount*
number
siblings
number
Default
1Pages either side of the current one.
boundaries
number
Default
1Pages always shown at each end.
previousLabel
string
Default
"Previous"nextLabel
string
Default
"Next"
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | – | The current page, 1-based. Pass with onPageChange to control it. |
| defaultPage | number | 1 | |
| onPageChange | (page: number) => void | – | |
| getHref | (page: number) => string | – | Turns every control into a link, for server-rendered or crawlable lists. |
| size | Size | "md" | |
| pageCount* | number | – | |
| siblings | number | 1 | Pages either side of the current one. |
| boundaries | number | 1 | Pages always shown at each end. |
| previousLabel | string | "Previous" | |
| nextLabel | string | "Next" |
