Accessible, client-side pagination component that renders page navigation with smart ellipsis logic and a set of composable sub-components for building custom pagination UIs. ## Key Components | Export | Type | Description | |---|---|---| | `Pagination` | Component | Full-featured pagination with built-in page number generation, ellipsis, and prev/next controls | | `PaginationContent` | `forwardRef` | Flex container (`

`) for pagination items | | `PaginationItem` | `forwardRef` | Wrapper `
• ` for individual pagination elements | | `PaginationLink` | `forwardRef` | Styled `` for individual page links | | `PaginationEllipsis` | `forwardRef` | `` rendering a `MoreHorizontal` icon with screen-reader text | | `PaginationPrevious` | `forwardRef` | Previous-page `` with `ChevronLeft` icon | | `PaginationNext` | `forwardRef` | Next-page `` with `ChevronRight` icon | **Page number algorithm:** Shows up to 5 pages. For larger sets it always renders the first and last page, up to 3 middle pages around the current page, and inserts ellipsis (`-1`/`-2` sentinel values) where gaps exist. ## Usage Example **Simple controlled pagination:** ```typescript import { Pagination } from "@/components/pagination" export function MyList() { const [page, setPage] = React.useState(1) return ( <> ) } ``` **Composable low-level API:** ```typescript import { PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "@/components/pagination" export function CustomPagination() { return ( ) } ```