Pagination
Page navigation controls for paginated data.
Examples
Basic pagination
Standard numbered page controls with previous/next buttons.
With ellipsis
Large page counts collapse middle pages into an ellipsis.
Compact (prev/next only)
Minimal pagination showing only previous and next with a page counter.
With page count
Displays the visible range and total record count above the controls.
Icons Only
Pagination with just arrow buttons and page indicator.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Pagination } from "@rokle/components";import { Pagination } from "@rokle/components";
export function Example() {
return <Pagination />;
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | - | Current page number. |
| totalPages | number | - | Total number of pages. |
| onPageChange | (page: number) => void | - | Called when page changes. |