Ravox KitNavigation
Pagination
Previous, next and page numbers with ellipses that don't make the buttons jump around. Shows "1–24 of 415", becomes real links with href (and Next's <Link> with link) and shrinks to "3 of 18" when space runs out.
Settings
Toggles
Examples
Below a list
- #4821Pix · pago
- #4820Cartão 3x · pago
- #4819Pix · aguardando
Links with Next (page in the URL)
Few pages: no ellipses
Compact (little space)
Installation
The command creates components/ui/pagination.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add paginationProps
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | — | Current page, starting at 1. |
| total / pageSize | number | — | Total items and items per page: they compute the pages and the summary. |
| pageCount | number | — | Total pages directly, when there is no total item count. |
| onPageChange | (page: number) => void | — | Button mode: called with the new page. |
| href | (page: number) => string | — | Link mode: the address of each page (good for SEO and for opening in another tab). |
| link | (props) => ReactElement | — | Replaces the default <a>, e.g.: (p) => <Link {...p} />. |
| siblingCount | number | 1 | How many pages show on each side of the current one. |
| showSummary | boolean | false | Shows "1–24 of 415" (needs total and pageSize). |
| itemLabel | string | — | Name of the items in the summary: "of 415 orders". |
| size | "sm" | "md" | "md" | Height of the cells: 32 or 36px. |