ComponentsNavigation
Pagination
Move between pages of results, with a fixed width and real links.
Theme
Motion
Move between pages of results, with a fixed width and real links.
const [page, setPage] = useState(1);
<Pagination page={page} pageCount={12} onPageChange={setPage} />The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Pagination } from "junco";
const [page, setPage] = useState(1);
<Pagination page={page} pageCount={12} onPageChange={setPage} />getHref makes each page a real link: better for SEO, middle-click and sharing.
Prev, next and "Page x of y" only. Good on narrow screens.
Pagination#pagepageCountonPageChangegetHrefsiblingsboundariessizeisCompactlabelclassNames| Prop | Type | Default |
|---|---|---|
pageRequired. Current page, 1-based. | number | – |
pageCountRequired. Total pages. | number | – |
onPageChangeRequired. Called with the new page. | (page: number) => void | – |
getHrefBuild a URL per page so each one is a real link. | (page: number) => string | – |
siblingsPages shown on each side of the current one. | number | 1 |
boundariesPages always shown at each end. | number | 1 |
sizeButton size. | "sm" | "md" | "md" |
isCompactHide the numbered pages. | boolean | false |
labelAccessible name for the nav. | string | "Pagination" |
classNamesClass overrides for each part. | { root?, list?, item?, ellipsis?, summary? } | – |
usePagination / getPaginationItems#The math on its own, for custom layouts. Returns numbers and "ellipsis-start" / "ellipsis-end" markers, always the same length so the control never jumps.
pagepageCountsiblings / boundaries| Prop | Type | Default |
|---|---|---|
pageCurrent page. | number | – |
pageCountTotal pages. | number | – |
siblings / boundariesSame as on Pagination. | number | – |
| Key | Action |
|---|---|
| Tab | Moves between the page buttons. |
| Enter | Goes to the focused page. |