104Get started
HextaUI

Pagination: Composable

Without count, build the bar from the parts, as in shadcn/ui. Pass render to use your router's link.

"use client"

import * as React from "react"

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

const pages = [1, 2, 3]

export function PaginationComposable() {
  const [page, setPage] = React.useState(2)

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            render={<button type="button" />}
            disabled={page === 1}
            onClick={() => setPage(page - 1)}
          />
        </PaginationItem>
        {pages.map((item) => (
          <PaginationItem key={item}>
            <PaginationLink
              render={<button type="button" />}
              isActive={item === page}
              onClick={() => setPage(item)}
            >
              {item}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext
            render={<button type="button" />}
            disabled={page === pages.length}
            onClick={() => setPage(page + 1)}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Add this example

This adds the example as components/examples/pagination/composable.tsx, together with the Pagination component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/pagination-composable.json

To add only the component, follow the Pagination installation.

Props in this example

The Pagination props this example sets, from the API reference.

PaginationLink

PropTypeDefault
isActiveMarks the current page with aria-current="page".
booleanfalse
render
ReactElement | (props, state) => ReactElement<a>

Every prop is in the Pagination API reference.

More Pagination examples

See them all, with keyboard support and accessibility notes, on the Pagination page.

Related components