Long result sets demand pagination to keep pages lean and navigation snappy. Without a reusable pagination bar, every list reimplements button states, ellipsis logic, disabled-boundary guards, and dark-mode tokens from scratch — inviting state bugs (page out of sync) and a11y oversights (missing aria-current, non-semantic nav).

Pagination is a controlled component with page, onPageChange, and totalPages props. It renders a semantic <nav> with Previous/Next arrow buttons, intelligent page-number buttons with ellipsis for large result sets, and a configurable siblingCount (default 1) to tune how many adjacent pages appear around the current page. The nav carries data-react-fancy-pagination for stable targeting.

Import Pagination from @particle-academy/react-fancy, then render <Pagination page={current} onPageChange={setPage} totalPages={total}>. The component disables Previous/Next buttons at boundaries, auto-hides below two pages, and works with any data-fetch or offset logic you wire into onPageChange.