Pagination

import { Pagination } from "@/components/ui/pagination";

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

export function Example() {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      page={page}
      totalPages={20}
      onPageChange={setPage}
    />
  );
}

Pagination                        (single component — pass page, totalPages, onPageChange)
├── page={number}                 (current 1-indexed page)
├── totalPages={number}           (renders nothing when ≤ 1)
├── onPageChange={fn}             (called with the new page number)
├── siblingCount={1}              (neighbors around current page, default 1)
├── showPrevNext={true}           (show Prev / Next buttons, default true)
├── previousLabel="Previous"      (label for the Prev button)
├── nextLabel="Next"              (label for the Next button)
└── size="default" | "sm"         (sm = h-8 buttons, dense table footers)

Need router-aware links or a completely custom layout? The slot exports
(PaginationRoot / PaginationContent / PaginationItem / PaginationLink /
PaginationPrevious / PaginationNext / PaginationEllipsis) remain available
as an escape hatch from the same file.