Pagination

A live demo against a mocked server in your browser — the block is the registry's own source.

Install

npx shadcn add @mantle/mantle-pagination

Needs a React Aria shadcn project and the @mantle registry in components.json — see Install. The block lands in components/mantle/mantle-pagination.tsx, yours to edit.

Usage

Feed it any { total, limit, skip } and handle onSkipChange; data-table uses it internally.

import { MantlePagination } from "@/components/mantle/mantle-pagination";

<MantlePagination page={result} onSkipChange={(skip) => setQuery({ ...query, $skip: skip })} />;

• Named mantle-pagination so it never collides with shadcn’s own pagination primitive, which it wraps.
• Pass getHref for real, crawlable page URLs; omit it for in-place paging.
• Renders nothing when everything fits on one page.

View the source.