Pagination

Controls page switching for multi-page data or content.

Last updated 5/23/2025

Example

Set total pages with the count prop. Pages within two steps are shown; farther pages collapse to ellipsis.

import { Pagination } from "@serendie/ui";
import { useState } from "react";

export function BasicSample() {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      count={10}
      page={page}
      onPageChange={({ page }) => setPage(page)}
    />
  );
}

Adjust visible range

Change how many pages appear around the current page via siblingCount. In this example it's 4 to show more numbers.

import { Pagination } from "@serendie/ui";

export function WithMoreSiblingsSample() {
  return <Pagination count={100} siblingCount={4} />;
}