Pure page-window engine plus numbered, compact, card-footer and carousel-dot paginators; the volt marker glides to the active page and numbers slide as the window shifts.
paginationpagerpagestablecarouseldotsnavigation
Installation
$npx shadcn@latest add @geturui/pagination
Usage
usage.tsx
1import { Pagination, PaginationFooter, getPageItems } from "@/components/ui/pagination";
2
3export function Results({ page, setPage }: { page: number; setPage: (p: number) => void }) {
4 return (
5 <>
6 <Pagination count={24} page={page} onPageChange={setPage} />
7 <PaginationFooter total={284} noun="events" />
8 </>
9 );
10}
11
12// Headless: build your own UI from the same engine.
13getPageItems({ page: 7, count: 20, siblings: 1, boundaries: 1 });
14// -> 1 … 6 7 8 … 20
Props
| Prop | Type | Default | Description |
|---|---|---|---|
getPageItems() | ({ page, count, siblings?, boundaries? }) => PageItem[] | — | Pure engine. Returns pages and ellipses; an ellipsis only appears where it hides two or more pages. |
count* | number | — | Total pages (Pagination, PaginationCompact, PaginationDots). |
page / defaultPage / onPageChange | number / number / (page) => void | — | Current page, 1-based. Controlled or uncontrolled. |
siblings / boundaries | number | 1 / 1 | Pages around the current one, and pinned at each end. |
size | "sm" | "md" | "lg" | "md" | 32, 36 or 40px items. |
shape | "round" | "square" | "round" | Shape of page items and the marker. |
showLabels | boolean | true | Previous / Next text beside the arrows from sm up. |
responsive | boolean | true | Below sm, numbers swap for "Page x of y". |
PaginationCompact | { count, page, onPageChange, editable?, size? } | — | "Page 3 of 12" with arrows; editable makes the number a field (Enter, arrow keys). |
PaginationFooter | { total, pageSize?, pageSizeOptions?, onPageSizeChange?, noun? } | — | Card or table footer: showing range, rows-per-page select and compact arrows. |
PaginationDots | { count, page, onPageChange, size?, tone?, framed?, itemLabel? } | — | Carousel dots; the active one stretches into a gliding capsule. Arrow keys move between slides. |
Accessibility
- Numbered and compact paginators are nav landmarks with a label; the current page has aria-current="page".
- Arrow buttons are labelled "Go to previous page" / "Go to next page" and disable at the ends.
- Ellipses are aria-hidden; page changes in compact and footer modes are announced politely.
- Dots use a roving tab stop with Left/Right arrows and labels like "Slide 2 of 4" on 24px hit areas.