When to use it

Use Pagination when a result set is too large to show on one page and visitors need controls to move through numbered pages. It is standard at the bottom of product listing grids, search results, order history tables, and any paginated API response.

If the content uses infinite scroll or cursor-based loading, pagination controls are not the right fit. Use InfiniteScroll instead.

Slot strategy

Pagination is a flat list composition:

• Pagination is the root <nav> element.
• PaginationContent is the flex row that holds all items.
• PaginationItem wraps each control in the row.
• PaginationLink is a numbered page link. Set isActive on the current page to highlight it.
• PaginationPrevious and PaginationNext are directional controls with built-in arrow icons and labels.
• PaginationEllipsis indicates skipped pages between visible numbers.

Behavior and theming guidance

PaginationLink renders as a button-sized link with hover and active states. The isActive variant applies the primary background color to mark the current page.

PaginationPrevious and PaginationNext include text labels ("Previous" and "Next") alongside their arrow icons. On narrow screens, consider hiding the text with a responsive utility and keeping only the arrows.

The whole bar centers itself horizontally by default with justify-center. Override the justify class on PaginationContent if you need left-aligned or right-aligned pagination in a specific layout.