Pagination
Composable pagination controls (Pagination / PaginationContent / PaginationItem / PaginationLink / PaginationPrevious / PaginationNext / PaginationEllipsis). Link-based by default — pair with client-side navigation or server params.
Short (3 pages)
Long range with ellipsis
Installation
pnpm dlx @hex-core/cli add paginationAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes on the <nav> |
AI Guidance
When to use
Use for navigating between pages of a paginated dataset: blog lists, search results, table rows. Use PaginationEllipsis to truncate long ranges.
When not to use
Don't use for infinite scroll (use IntersectionObserver). Don't use for step-by-step wizards (use a stepper). Don't use for fewer than ~3 pages (just show all the items).
Common mistakes
- Using PaginationLink without href (anchor is not keyboard-reachable)
- Forgetting isActive on the current page (no visual or aria-current feedback)
- Showing every page number on long ranges — use PaginationEllipsis to truncate
- Using onClick-only <button> instead of PaginationLink — loses right-click-open-new-tab affordance; prefer href + Next.js Link when client-side routing is needed
Accessibility
Root is role='navigation' aria-label='pagination'. Active link gets aria-current='page'. Previous/Next have aria-label. Ellipsis is decorative (aria-hidden) with a sr-only 'More pages' label.
Related components
Token budget: 500