Pagination
A minimal page navigator: prev/next icon buttons around an inline list of page numbers. Numbers read as quiet navigation chrome rather than a row of stamped buttons; the active page gets bold text and a hairline underline. Renders nothing when there is only one page.
$npx shadcn add @patchui/pagination
Usage
import { useState } from "react";
import { Pagination } from "@patchui/react";
const [page, setPage] = useState(1);
<Pagination page={page} totalPages={10} onPageChange={setPage} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | - | The current page (1-indexed). |
| totalPages | number | - | Total number of pages. |
| onPageChange | (page: number) => void | - | Fired when the user picks a new page (a value from 1 to totalPages). |
| showSummary | boolean | true | Show the "Page X of Y" caption beside the controls. |
| ariaLabel | string | "Pagination" | Accessible label for the navigation landmark. |
Notes
- Tabular numerals: Page numbers use tabular figures so digits stay column-aligned regardless of width.
- Truncation: For large page counts the control shows the first, last, current ±1, and ellipsis markers for gaps.
- Keyboard: Page buttons are focusable with the standard focus outline.