Navigation

Pagination

Page-by-page navigation.

Client componentSource

Import

import { Pagination } from '@the_viveksingh/vivek-ui'

Page through a list

Controlled on purpose: the page number usually belongs in the URL, not in component state. siblingCount decides how many numbers flank the current page before it collapses to an ellipsis.

Page 4 of 12

const [page, setPage] = useState(1)

<Pagination page={page} pageCount={12} onPageChange={setPage} />

First and last

<Pagination page={page} pageCount={12} onPageChange={setPage} showFirstLast siblingCount={2} />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Pagination
Prop	Type	Default	Description
`page`	`number`	—	1-based current page. Clamped into `[1, pageCount]`. Default `1`.
`pageCount`	`number`	—	Total number of pages. `0` renders nothing; `1` renders a single, inert page.
`onPageChange`	`(page: number) => void`	—	Called with the 1-based page the user asked for. Never called with the current page.
`siblingCount`	`number`	—	Pages shown either side of the current one. Default `1`.
`showFirstLast`	`boolean`	—	Add "first" and "last" jump buttons outside prev/next. Default `false`.
`size`	`'sm' \| 'md' \| 'lg'`	—	—
`labels`	`Partial<PaginationLabels>`	—	Localised strings. Merged over the English defaults.
`ellipsis`	`ReactNode`	—	Glyph for the gap. Always decorative. Default `…`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Client component

Pagination declares 'use client' because it needs state, effects or event handlers. Importing it into a Server Component creates a client boundary at this component — everything above it stays on the server.