Pagination

A pagination component for navigating between pages of content. Supports configurable sibling count and colors.

Basic

Prop	Type	Default	Description
`page`	`number`	—	The current active page.
`totalPages`	`number`	—	Total number of pages.
`onPageChange`	`(page: number) => void`	—	Called when the page changes.
`siblingCount`	`number`	`1`	Number of sibling pages shown on each side of the current page.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the active page indicator.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}
`--mantle-hover`	`CSS variable`	`gradient`	Override the hover background via style. Set to "none" to disable. e.g. style={{ "--mantle-hover": "none" }}

page

number

The current active page.

totalPages

number

Total number of pages.

onPageChange

(page: number) => void

Called when the page changes.

siblingCount1

number

Number of sibling pages shown on each side of the current page.

color"blue"

Accent color for the active page indicator.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

--mantle-hovergradient

CSS variable

Override the hover background via style. Set to "none" to disable. e.g. style={{ "--mantle-hover": "none" }}