Pagination

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Pagination } from "@tessinaui/ui";

{/* Uncontrolled */}
<Pagination count={10} defaultPage={1} />

{/* Controlled */}
<Pagination count={10} page={page} onChange={setPage} />

{/* Primary active style */}
<Pagination count={10} defaultPage={3} variant="primary" />

{/* Text Previous / Next buttons */}
<Pagination count={10} defaultPage={3} navStyle="label" />

{/* Square item shape */}
<Pagination count={10} defaultPage={3} rounded="none" />

{/* Custom truncation */}
<Pagination count={50} defaultPage={25} siblingCount={2} boundaryCount={2} />

{/* RTL */}
<Pagination count={10} defaultPage={3} dir="rtl" navStyle="label" />

Examples

Default

A basic pagination with chevron nav buttons and smart ellipsis truncation.

Variants

Three active-page styles — default, primary, and outline.

Sizes

Five size tokens from xs to xl.

Nav Styles

Navigation buttons as chevron icon, text label, or none.

Controlled

Drive the active page from external state via page and onChange.

Loading

Use PaginationSkeleton as a placeholder while page data loads.

API Reference

Props

Nav styles

Variants

Notes

• Controlled vs uncontrolled: When page is provided the component is fully controlled. Use defaultPage for uncontrolled usage.
• Ellipsis truncation: Uses the MUI usePagination algorithm — always shows boundaryCount pages at each end and siblingCount pages around the current page, collapsing the rest into ….
• RTL: dir="rtl" flips the chevron icons (ChevronRight becomes "go back") and swaps the positions of prev/next nav buttons so the "next" action is on the leading (left) side, matching Arabic/Hebrew pagination conventions.
• Accessibility: Renders as <nav role="navigation"> with aria-label="pagination navigation". Active page buttons have aria-current="page". All buttons have descriptive aria-labels that can be customised via getPageAriaLabel.
• No headless dependency: Pagination is implemented with plain React state — no Base UI primitives needed.