Pagination

Enables navigation across multiple pages.

Usage

Use the Pagination components together to build page navigation

import { Pagination, Button, Text } from "@elemnts-ui/react";

<Pagination count={100} pageSize={10}>
  <Pagination.PrevTrigger asChild>
    <Button variant="ghost">Prev</Button>
  </Pagination.PrevTrigger>
  <Pagination.Context>
    {(api) =>
      api.pages.map((page, index) =>
        page.type === "page" ? (
          <Pagination.Item key={index} {...page} asChild>
            <Button variant={api.page === page.value ? "solid" : "ghost"}>
              {page.value}
            </Button>
          </Pagination.Item>
        ) : (
          <Pagination.Ellipsis key={index} index={index}>
            <Text>...</Text>
          </Pagination.Ellipsis>
        ),
      )
    }
  </Pagination.Context>
  <Pagination.NextTrigger asChild>
    <Button variant="ghost">Next</Button>
  </Pagination.NextTrigger>
</Pagination>;

Sibling count

Adjust siblingCount to set how many adjacent pages are shown on either side of the current page.

Use Pagination.Context or the usePaginationContext hook to access pagination state and call helpers like setPage, setPageSize, goToNextPage, goToPrevPage, goToFirstPage, and goToLastPage.

API Reference

Pagination

The root component for the pagination.

Prop	Type	Default
asChild	`boolean`	`false`
boundaryCount	`number`	`1`
count	`number`	-
defaultPage	`number`	`1`
defaultPageSize	`number`	`10`
getPageUrl	`(details: PaginationPageUrlDetails) => string`	-
ids	`Partial<{ root: string; ellipsis: (index: number) => string; firstTrigger: string; prevTrigger: string; nextTrigger: string; lastTrigger: string; item: (page: number) => string }>`	-
onPageChange	`(details: PaginationPageChangeDetails) => void`	-
onPageSizeChange	`(details: PaginationPageSizeChangeDetails) => void`	-
page	`number`	-
pageSize	`number`	-
siblingCount	`number`	`1`
translations	`IntlTranslations`	-
type	`"button" \| "link"`	`"button"`

PaginationRootProvider

Provides the pagination state created with usePagination.

Prop	Type	Default
value	`UsePaginationReturn`	required
asChild	`boolean`	`false`

PaginationContext

Provides access to pagination state and helpers.

PaginationEllipsis

Renders an ellipsis between pagination items.

Prop	Type	Default
index	`number`	required
asChild	`boolean`	`false`

PaginationItem

Renders a page item.

Prop	Type	Default
type	`"page"`	required
value	`number`	required
asChild	`boolean`	`false`

PaginationNextTrigger

Renders a trigger that navigates to the next page.

Prop	Type	Default
asChild	`boolean`	`false`

PaginationPrevTrigger

Renders a trigger that navigates to the previous page.

Prop	Type	Default
asChild	`boolean`	`false`

PaginationFirstTrigger

Renders a trigger that navigates to the first page.

Prop	Type	Default
asChild	`boolean`	`false`

PaginationLastTrigger

Renders a trigger that navigates to the last page.

Prop	Type	Default
asChild	`boolean`	`false`