Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/ui-resolver.
• Live playground: /components/base-ui/pagination.

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 `` 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.

Page numbers are manual

The component does not generate page numbers automatically. You build the visible page range in your rendering logic and place the right PaginationLink and PaginationEllipsis elements. This gives you full control over the windowing strategy.

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.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/ui-resolver.
• Playground route: /sandbox?component=Pagination.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes