Pagination

Navigation controls for moving through paginated content. Provides previous/next arrows, numbered page links, and an ellipsis for skipping large page ranges. Renders as a semantic <nav> with aria-label="pagination".

Anatomy

<Pagination> is the <nav> wrapper. PaginationContent is the flex <ul>. Each control lives inside a PaginationItem. PaginationLink renders a numbered page anchor — pass isActive to highlight the current page. PaginationPrevious and PaginationNext are pre-styled arrow links. PaginationEllipsis represents a gap in the page sequence.

PaginationPrevious / PaginationNextPaginationLink isActivePaginationEllipsis

Examples

Simple — previous / next only

Numbered — active on first page

With ellipsis — active on middle page

Design Guidelines

Do

  • Always mark the active page. Pass isActive to the current PaginationLink so users know where they are.
  • Use ellipsis for large ranges. Show a window of 3–5 pages around the active page and collapse the rest with PaginationEllipsis.
  • Disable Previous on page 1, Next on last page. Prevent navigation to non-existent pages by omitting or disabling the relevant arrow.

Don't

  • Don't show all pages for large datasets. Listing 100 page links is unusable — always collapse with ellipsis.
  • Don't use pagination for infinite scroll. If content loads automatically on scroll, a pagination control is contradictory and confusing.
  • Don't omit the page count context. When possible pair pagination with a "Page X of Y" label so users understand the total scope.

Developer Reference

Accessibility

  • <Pagination> renders a <nav> with aria-label="pagination".
  • PaginationPrevious has aria-label="Go to previous page" and PaginationNext has aria-label="Go to next page".
  • The active PaginationLink renders with aria-current="page".
  • PaginationEllipsis is aria-hidden— it contains a visually hidden "More pages" label for screen readers.
  • All links accept standard <a> props — pass an onClick handler for client-side pagination instead of href.

Usage

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

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

// Client-side pagination (no href)
<PaginationLink onClick={() => setPage(2)}>2</PaginationLink>