Pagination

Server-component pagination — URL-driven, preserves filter params.

components/pagination.tsxPeer deps: lucide-react

Live preview

Usage

import { Pagination, parsePaginationParams } from "@/components/pagination";

const { page, pageSize, offset, rangeEnd } =
  parsePaginationParams(searchParams, { pageSize: 24 });

<Pagination
  total={total}
  page={page}
  pageSize={pageSize}
  basePath="/products"
  currentSearchParams={searchParams}
/>