Stepwise UI

Pagination

Page number navigation with smart ellipsis, prev/next arrows, and an active-page squircle pill. Fully controlled - manage page state yourself.

Installation

npx stepwise-ui add pagination

Default

Page 5 of 12
import { Pagination } from '@/components/stepwise/pagination'

const [page, setPage] = useState(1)

<Pagination page={page} totalPages={12} onChange={setPage} />

More siblings

Page 1 of 20
<Pagination page={page} totalPages={20} onChange={setPage} siblings={2} />

Few pages

The same component, not a separate mode - once every page fits without a gap, the row is just the page numbers and the arrows.
Page 1 of 3
// Nothing to configure - the ellipsis only ever appears once there's
// actually a gap wide enough to need one.
<Pagination page={page} totalPages={3} onChange={setPage} />

Props

PropTypeDescription
page
number
Current active page (1-indexed).
totalPages
number
Total number of pages.
onChange
(page: number) => void
Called when the user navigates to a new page.
siblings
number
Pages to show either side of active. Default 1.