React Pagination
Paging for parametric tables and long catalogs: numbered pages in a sibling window around the current page (edges always visible, gaps as ellipses), prev/next arrows, and — for tables — a monospaced "x–y of z" readout with a page-size select. Page numbers render in mono so the control doesn't shift width as you move through four-digit page counts.
Full table variant — sibling window, edges, row-count readout, and page size.
Minimal — five pages, no readout.
Installation
npx shadcn@latest add "http://localhost:3000/registry/pagination.json"
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | — | Current page (1-based) |
| pageCount | number | — | Total pages |
| onPageChange | (page: number) => void | — | Page selection |
| siblingCount | number | 1 | Numbered buttons on each side of current |
| totalItems | number | — | Enables the "x–y of z" readout (with pageSize) |
| pageSize | number | — | Rows per page |
| pageSizeOptions | number[] | — | Renders the page-size select |
| onPageSizeChange | (size: number) => void | — | Page-size selection |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.