Pagination

Page controls composed from parts, with an ellipsis helper that decides which numbers to show.

Source: 1 file
Dependencies: none
Playground: no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

Default

Showing 1 – 10 of 850Page 1 of 85

<PaginationFirst /> ‹ getPageItems(page, total) › <PaginationLast />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import {
  Pagination, PaginationContent, PaginationItem,
  PaginationLink, PaginationPrevious, PaginationNext, getPageItems,
} from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

pagination-example.tsx

import {
  Pagination, PaginationContent, PaginationItem,
  PaginationLink, PaginationPrevious, PaginationNext, getPageItems,
} from "kipui";

<Pagination variant="outline" size="sm">
  <PaginationContent>
    <PaginationPrevious onClick={prev} />
    {getPageItems(page, totalPages).map((item, i) => (
      <PaginationItem key={i}>
        <PaginationLink isActive={item === page}>{item}</PaginationLink>
      </PaginationItem>
    ))}
    <PaginationNext onClick={next} />
  </PaginationContent>
</Pagination>

`getPageItems` returns the numbers and the ellipsis markers — you don't work out the window yourself.
Mark the current page with `isActive`; that is what sets `aria-current`.

API reference

Transcribed from the component's own types. Props with no default are required.

Pagination

Prop	Default	Description
variant"default" \| "outline" \| "ghost" \| "soft" \| "link"	"default"	Look shared by every control in the set.
size"sm" \| "default" \| "lg" \| "icon"	"default"	Control size.
colorstring	required	Raw CSS colour for the active page fill.
colorForegroundstring	"#fff"	Text colour on the active page when `color` is set.

PaginationLink

Prop	Default	Description
isActiveboolean	false	Current page. Sets `aria-current`.
size"sm" \| "default" \| "lg" \| "icon"	required	Overrides the context size for one control.