KQ-200 · PAGINATION/RAIL
Pagination Rail
A pager with a lively active pill. Changing pages slides the filled indicator from the old number to the new one on a single overshoot, and hovering or focusing any page floats a preview above it. Prev and Next clamp at the ends.
KQ-200 · PAGINATION/RAIL
Page 3 of 12
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/pagination-rail
Props
- total / page
- number
- default —
- Total pages and the current 1-based page.
- onPageChange
- (page) => void
- default —
- Fires with the requested page.
- siblingCount
- number
- default —
- Pages kept either side of the current before an ellipsis.
- preview
- (page) => ReactNode
- default —
- Content for the hover/focus preview over a page.
| Prop | Type | Default | Description |
|---|---|---|---|
| total / page | number | — | Total pages and the current 1-based page. |
| onPageChange | (page) => void | — | Fires with the requested page. |
| siblingCount | number | — | Pages kept either side of the current before an ellipsis. |
| preview | (page) => ReactNode | — | Content for the hover/focus preview over a page. |