Fluixi UI
GitHub ↗

Examples

Loading preview…

pagination

Accessible pagination — page buttons with a sliding window and ellipses.

A headless pagination control. The root owns the current page and generates the visible sequence of page numbers and ellipses; you supply how a page item and an ellipsis render, and place PaginationItems where the numbers should appear. A single hidden page between two shown groups renders as its number rather than an ellipsis (no 1 … 3 when only 2 is hidden).

Installation

pnpm add @fluixi-ui/pagination

Usage

import { createSignal } from '@fluixi/reactive/signal';
import {
  Pagination,
  PaginationItems,
  PaginationItem,
  PaginationEllipsis,
  PaginationPrevious,
  PaginationNext,
} from '@fluixi-ui/pagination';

const [page, setPage] = createSignal(1);

<Pagination
  count={20}
  page={page()}
  onPageChange={setPage}
  itemComponent={(p) => <PaginationItem page={p.page}>{p.page}</PaginationItem>}
  ellipsisComponent={() => <PaginationEllipsis />}
>
  <PaginationPrevious />
  <PaginationItems />
  <PaginationNext />
</Pagination>

Props (Pagination)

Prop Type Default Description
count number — Total number of pages (required).
page number — Controlled current page (1-based).
defaultPage number 1 Initial uncontrolled page.
onPageChange (p: number) => void — Called when the page changes.
siblingCount number 1 Pages shown on each side of the current page.
showEdges boolean true Always show the first and last page.
disabled boolean false Disable all controls.
label string 'Pagination' Accessible name for the landmark.
itemComponent (p: { page: number }) => Element — Renders each page button.
ellipsisComponent () => Element — Renders an ellipsis placeholder.

Parts

Part Description
Pagination The <nav> root. Owns the page state.
PaginationItems Placeholder where the generated numbers/ellipses render.
PaginationItem A page button; aria-current="page" when active.
PaginationEllipsis A collapsed-range gap (…).
PaginationPrevious / PaginationNext Step buttons; auto-disabled at the edges.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.