Components
Pagination
One filled pill, and the ends always reachable.
Showing page 1 of 12
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/pagination.jsonEllipses are rendered, not hidden
Collapsing pages 4–11 into nothing makes the range look shorter than it is. The gap is drawn, so the scale of what you are paging through stays honest.
The first and last page are always in the window, because jumping to the end is the second most common thing anyone does here — usually to find the oldest item.
Previous and Next disable at the ends rather than disappearing, so the control does not change width as you page.
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | — | Current page, 1-based. |
| pages | number | — | Total pages. |
| onChange | (p: number) => void | — | Fires with the requested page. |