Pagination

Pagination provides navigation controls for multi-page content. It includes previous/next buttons, numbered page links, and an ellipsis for large page ranges.

Interactive example#

Pagination · Live example

Project 01

Project 02

Project 03

Page 1 of 5

Move through pages and watch the displayed records change.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from '@clidey/ux';

Basic pagination#

TSX

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="/page/1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/2" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/3">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="/page/3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

With ellipsis (large page counts)#

TSX

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href={`/page/${currentPage - 1}`} />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/7">7</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/8" isActive>8</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/9">9</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/20">20</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href={`/page/${currentPage + 1}`} />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Click-based pagination#

TSX

function DataTable() {
  const [page, setPage] = useState(1);
  const totalPages = 10;

  return (
    <>
      {/* table content */}
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              className={page === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
            />
          </PaginationItem>
          {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
            <PaginationItem key={p}>
              <PaginationLink
                isActive={p === page}
                onClick={() => setPage(p)}
                className="cursor-pointer"
              >
                {p}
              </PaginationLink>
            </PaginationItem>
          ))}
          <PaginationItem>
            <PaginationNext
              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
              className={page === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
            />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </>
  );
}

Sub-components#

Component	Description
`Pagination`	Root `<nav>` element.
`PaginationContent`	`<ul>` container for items.
`PaginationItem`	`<li>` wrapper for each element.
`PaginationLink`	Numbered page link.
`PaginationPrevious`	Previous page button with arrow icon.
`PaginationNext`	Next page button with arrow icon.
`PaginationEllipsis`	`...` indicator for skipped pages.

PaginationLink Props

Prop	Type	Default	Description
`isActive`	`boolean`	`false`	Highlights the link as the current page.
`size`	`"icon"`	`"icon"`	Renders as an icon-sized button.
`href`	`string`	—	Navigation URL.

Security note: href is rendered directly on an <a> element. React neutralizes javascript: URLs, but if the value comes from user or server data, validate it yourself (allow only relative paths or https:), since data: and blob: URLs are not blocked by the component. | className | string | — | Additional CSS classes. |

Was this page helpful?