Pagination
navigationPage navigation with numbered buttons, prev/next arrows, ellipsis for long ranges, active page highlight, disabled boundary states, and page counter. Addresses blog pagination scalability finding from E2E Test 2.
Import
import { Pagination } from "packages/ui/src";Props
PaginationProps
| Prop | Type | Required |
|---|---|---|
totalPages | number | Yes |
currentPage | number | No |
onPageChange | (page) => void, maxVisible?: number, showCounter?: boolean | No |
Examples
Navigation
Pagination
Page navigation with numbered buttons, prev/next arrows, ellipsis for long ranges, and page counter. Fifth pipeline-generated component — addresses blog scalability finding from E2E Test 2.
Blog List
Compact pagination for an EmDash blog with 8 pages of posts.
Showing page 1 of 8 · 10 posts per page
Data Table
Pagination for a 15-page data grid — ellipsis appears in the middle.
Page 5 of 15 · 25 rows per page
Long Range
100 pages — ellipsis on both sides when in the middle.
Page 10 of 100
Compact (No Counter)
Boundary States
First page (prev disabled) and last page (next disabled).
First Page
Last Page
Pipeline Story
Self-Healing Loop
E2E Test 2 finding: “Blog list has no pagination — works with 4 posts but won’t scale.”
Brain Query
NotebookLM recommended Pagination as next priority component.
Stitch Design
Generated via Aetheris Observatory — teal active state, dark surface.
Token + Component
15 pagination tokens, Pagination.tsx with ellipsis, boundary states, counter.
Deploy
66 tests, drift check, build, PM2 restart, all routes 200.