Navigation

Pagination

Page navigation with sibling/boundary windows, ellipsis collapsing, optional first/last buttons and three sizes.

Import

import { Pagination } from "@zephora/react";

<Pagination count={10} defaultPage={3} />

Control the current page with `page` + `onPageChange`.

Page 1 of 20

const [page, setPage] = React.useState(1);

<Pagination count={20} page={page} onPageChange={setPage} showFirstLast />
<p>Page {page} of 20</p>

`siblingCount` and `boundaryCount` shape the visible window; `size` scales the buttons.

<Pagination count={30} defaultPage={15} siblingCount={2} boundaryCount={2} size="sm" />
<Pagination count={30} defaultPage={15} size="lg" />

Prop	Type	Default	Description
`count` *	`number`	—	Total number of pages.
`page`	`number`	—	Controlled current page (1-based).
`defaultPage`	`number`	`1`	Initial page when uncontrolled.
`onPageChange`	`(page: number) => void`	—	Called with the next page number.
`siblingCount`	`number`	`1`	Pages shown on each side of the current page.
`boundaryCount`	`number`	`1`	Pages always shown at the start and end.
`showFirstLast`	`boolean`	`false`	Show first/last page buttons.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control size.
`disabled`	`boolean`	`false`	Disables every button.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.