Pagination

A React component in Beamline's Navigation category.

Moves through pages of a known length: first, last and the current page's neighbours, with an optional “41–60 of 468”; a phone shows “Page 6 of 24”.

Use it for

Moving through pages of results when the total is known.

Not for

Large live datasets (a virtualised data grid).
Feeds (load more or infinite scroll).

Anatomy

range text
previous
page numbers with gaps
next

States

first page
middle
last page
phone (compact)

Keyboard

Tab through the buttons; the current page carries aria-current

Motion

None. The current page's plate travels to the next page chosen as matter (ui/lib/contour.ts); in the middle of a long list the window keeps the current page in its middle slot, so the plate stays and the numbers change.

Props

Prop	Type	Default	Description
`page`	`number (from 1)`	—
`pageCount`	`number`	—
`onPageChange`	`(page) => void`	—
`siblings`	`number`	`1`
`pageSize / total`	`number`	—
`pageWindow(page, count, siblings)`	`function`	—	The numbers shown, in a fixed number of slots (2 × siblings + 5) so Next and Previous never move; every page when there are that few; a gap always stands for two or more pages.
`classNames`	`PaginationClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—	native nav

Dependencies

lucide-react

Import

import { Pagination } from "@/components/pagination/pagination";

Get it

Pagination is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent