Navigation
Pagination
A fully controlled page picker with sibling-based ellipsis collapsing for large page counts.
PaginationPreview
Usage
tsx
import { Pagination } from "@vesture/react";
<Pagination page={page} totalPages={20} onPageChange={setPage} siblingCount={2} />Behavior
- Always shows page 1 and the last page; shows siblingCount pages on each side of the current page, collapsing any gap larger than one page into a single ellipsis.
- If the full range fits without collapsing (totalPages <= siblingCount * 2 + 5), every page number renders and no ellipsis appears.
- Prev/Next buttons disable at the first/last page rather than wrapping.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | — | Required. Current page, 1-indexed. |
| totalPages | number | — | Required. Total page count. |
| onPageChange | (page: number) => void | — | Required. Fires on prev/next/number click. |
| siblingCount | number | 1 | Sibling pages shown around the current page. |