Pagination

count is the total item count and pageSize is the number per page. siblingCount controls nearby page buttons.

import { Pagination } from '@manti-ui/react';

export default function PaginationBasic() {
  return (
    <Pagination
      count={200}
      pageSize={20}
      defaultPage={3}
      siblingCount={1}
      variant="primary"
    />
  );
}

Many pages

Sizes

API

Prop	Type	Default	Description
`count`	`number`	—	Total number of items across all pages.
`pageSize`	`number`	—	Items per page.
`page`	`number`	—	Controlled current page (1-based).
`defaultPage`	`number`	—	Initial page for uncontrolled usage.
`onPageChange`	`(page: number) => void`	—	Called whenever the page changes.
`siblingCount`	`number`	—	Pages shown on each side of the current page.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`variant`	`MantiVariant`	`'primary'`	Variant applied to the active page.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="pagination"][data-part="root"]`	The `<nav>` wrapper carrying scope, size, and variant.
`prev-trigger`	`[data-scope="pagination"][data-part="prev-trigger"]`	Button that moves to the previous page.
`next-trigger`	`[data-scope="pagination"][data-part="next-trigger"]`	Button that moves to the next page.
`item`	`[data-scope="pagination"][data-part="item"]`	A single page button; the active one carries `data-selected`.
`ellipsis`	`[data-scope="pagination"][data-part="ellipsis"]`	The gap marker shown when pages are collapsed.

Tokens

Token	Controls
`--manti-pagination-size`	size

Last updated 13 September 2026