Pagination

Compact pagination for tables, lists, and search results. Numbered, prev/next, ellipsis, and a count-only compact variant.

Included in the single kansho full pack. Components are not offered as separate installs.

Numbered with prev/next

Default usage

With ellipsis

Long ranges collapse

Disabled previous

First page

No prev/next

Numbers only

Compact count-only

Page X of Y

Usage

Guidance

Use the full Pagination when page numbers help the operator navigate.
Use PaginationCompact when space is tight and only prev / next matter.
Tune siblings and boundaries to control how many page numbers show.

Don't

Paginate a short list that fits on one screen.
Use it for infinite feeds — those load on scroll.

When to use: Bounded, page-numbered result sets like tables and search results.
When not to: Endless streams or lists short enough to show at once.

Accessibility

Keyboard & screen reader

Keyboard

Tab: Move focus across page buttons and prev / next.
EnterSpace: Go to the focused page.

Announces

The nav carries aria-label "Pagination".
The current page exposes aria-current="page".
Prev / next buttons carry Previous page / Next page labels.

Props

Pagination + PaginationCompact

Component	Prop	Type	Default	Description
Pagination	pagerequired	number	—	Current 1-based page.
Pagination	totalPagesrequired	number	—	Total page count.
Pagination	onPageChange	(page) => void	—	Fires with the chosen page.
Pagination	siblings	number	1	Page numbers shown either side of the current page.
Pagination	boundaries	number	1	Boundary pages always shown at each end.
Pagination	hidePrevNext	boolean	false	Hide the previous / next controls.
PaginationCompact	page / totalPages / onPageChange	same as above	—	Count-only prev / next variant.

Component documentation

Pagination

components/ui/pagination.tsx

Purpose

Navigates among numbered pages with optional compact controls.

Appropriate use

Use for bounded paged datasets when users need direct access to nearby or boundary pages.

Example

components/ui/pagination.tsx has a representative live example in the "Numbered with prev/next" section on /components/pagination.

States

Supports first, middle, and last pages, ellipses, configurable siblings and boundaries, hidden previous or next controls, and compact mode.

API and props

Pagination accepts page, totalPages, onPageChange, siblings, boundaries, hidePrevNext, and native nav props; PaginationCompact accepts page, totalPages, onPageChange, and className.

Dependencies

React, Lucide icons, and the Kansho cn utility.

Accessibility

Uses labelled pagination navigation, names previous, next, and numbered buttons, marks the current page, and disables unavailable controls.

Limitations

It does not change routes or fetch data; callers own page state and side effects.

Source

Source: components/ui/pagination.tsx.

Full pack

components/ui/pagination.tsx is documented at /components/pagination and installs only through the single Kansho full pack; no individual component install is offered.