Pagination

Number InputPopover

Page navigation with ellipsis for long ranges.

Installation

pnpm add krz-ui

Usage

import { Pagination } from "krz-ui";
<Pagination page={page} totalPages={20} onPageChange={setPage} />

API Reference

PropTypeDescription
pagenumberCurrent page, 1-based.
totalPagesnumberTotal number of pages.
onPageChange(page: number) => voidCalled with the new page.
siblingCountnumberPages shown on each side of the current page. Defaults to 1.
size"sm" | "md"Button size.
className / style / ref—All go to the outer element. See Customization.
classNames{ button?, active?, nav?, ellipsis? }Extra classes for inner parts.