Pagination
Page navigation with prev/next, ellipsis, and active page. Compose with your router.
Install
Import path
Examples
Simple
Static markup with an active page and prev / next.
Icons Only
Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Pagination, PaginationContent, PaginationItem,
PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
} from "@codefast/ui/pagination";
<Pagination>
<PaginationContent>
<PaginationItem><PaginationPrevious href="#" /></PaginationItem>
<PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
<PaginationItem><PaginationEllipsis /></PaginationItem>
<PaginationItem><PaginationNext href="#" /></PaginationItem>
</PaginationContent>
</Pagination>
API reference
Props for each part of the component. All native element props are also forwarded.
Pagination parts
Compose your own paginator; wire links to your router or state.
| Prop | Type | Default | Description |
|---|---|---|---|
| PaginationLink | { isActive?: boolean } & anchor props | — | A page link. Set isActive on the current page. |
| PaginationPrevious / PaginationNext | anchor props | — | Prev/next controls — disable at the bounds via class + aria-disabled. |
| PaginationEllipsis | — | — | A non-interactive gap marker for skipped pages. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Renders a nav landmark labelled “pagination”.
- Mark the current page link with aria-current="page".
- Communicate disabled prev/next with aria-disabled, not just opacity.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Show first, last, current, and neighbours; collapse the rest with an ellipsis.
- Keep the active page clearly highlighted.
Don’t
- Don’t render dozens of page links — window them.
- Don’t leave prev/next clickable at the bounds.