Component

Pagination

Page controls with four navigation variants. Optional add-ons (page-size selector, total label) work with any variant.

variant="simple" (default)

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(1);
  return <Pagination page={page} totalPages={21} onPageChange={setPage} />;
}
render(<Demo />);

variant="numbered"

Windowed numbered buttons with ellipsis and a jump-to-page input.

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(4);
  return (
    <Pagination
      variant="numbered"
      page={page}
      totalPages={21}
      onPageChange={setPage}
    />
  );
}
render(<Demo />);

variant="minimal"

Prev / Next only — no page indicator. Useful for carousels or compact contexts.

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      variant="minimal"
      page={page}
      totalPages={8}
      onPageChange={setPage}
    />
  );
}
render(<Demo />);

variant="compact"

Four icon buttons only (« ‹ › »), no labels or page indicator. Right-aligned by default; override with className.

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      variant="compact"
      page={page}
      totalPages={8}
      onPageChange={setPage}
    />
  );
}
render(<Demo />);

Compact — alignment override

Use className to override the default right-alignment.

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      variant="compact"
      page={page}
      totalPages={8}
      onPageChange={setPage}
      className="justify-start"
    />
  );
}
render(<Demo />);

Compact + page-size selector and total label

The add-ons work with compact too — selector on the left, total label on the right.

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(25);
  return (
    <Pagination
      variant="compact"
      page={page}
      totalPages={Math.ceil(70 / size)}
      onPageChange={setPage}
      pageSize={size}
      onPageSizeChange={(s) => { setSize(s); setPage(1); }}
      totalLabel="70 titles"
    />
  );
}
render(<Demo />);

With page-size selector and total label

Both add-ons are independent of the variant. Here combined with the default simple variant.

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(20);
  return (
    <Pagination
      page={page}
      totalPages={11}
      onPageChange={setPage}
      totalLabel="202 posts"
      pageSize={size}
      onPageSizeChange={(s) => { setSize(s); setPage(1); }}
    />
  );
}
render(<Demo />);

Numbered + add-ons (full controls)

Admin table pattern: numbered navigation, page-size selector, and total count.

live editor — edit to update preview

function Demo() {
  const [page, setPage] = useState(4);
  const [size, setSize] = useState(10);
  return (
    <Pagination
      variant="numbered"
      page={page}
      totalPages={Math.ceil(202 / size)}
      onPageChange={setPage}
      totalLabel="202 articles"
      pageSize={size}
      onPageSizeChange={(s) => { setSize(s); setPage(1); }}
    />
  );
}
render(<Demo />);

Props

Prop	Type	Default	Description
page*	number	—	Current page (1-indexed).
totalPages*	number	—	Total number of pages.
onPageChange*	(page: number) => void	—	Called with the new page number.
variant	"simple" \| "numbered" \| "minimal" \| "compact"	"simple"	Navigation style. "simple" shows page x / y; "numbered" shows windowed buttons + jump-to-page; "minimal" shows Prev/Next only; "compact" shows four icon buttons (« ‹ › ») with no labels, right-aligned by default (override via className).
totalLabel	string	—	Optional label at the far right, e.g. "202 posts". Works with any variant.
pageSize	number	—	Current page size. Shows a size selector at the left when provided together with onPageSizeChange. Works with any variant.
onPageSizeChange	(size: number) => void	—	Called when the user changes items-per-page.
showPageNumbers	boolean	false	Deprecated. Use variant="numbered" instead.
className	string	—	Additional class on the bar wrapper.