Pagination

Pagination gives long lists an explicit sense of sequence once the content rail has done its job. The Swiss version keeps the control typographically aligned with the button system, so docs indexes, editorial archives, and product shelves can move page to page without dropping into a separate visual language.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Pagination>
  <PaginationPrevious href="#previous" />
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="#1" isActive>
        1
      </PaginationLink>
    </PaginationItem>
  </PaginationContent>
  <PaginationNext href="#next" />
</Pagination>

Why This Primitive Exists

Pagination should feel like a continuation of the list or archive, not a separate widget pasted onto the bottom of the page.

• Use it when the reader is moving through a known sequence of pages.
• Prefer it over infinite scroll when location, count, and backtracking matter.
• Keep it close to the content it paginates so the relationship is obvious.

Examples

Minimal Sequence

The smallest useful pattern is a previous link, a current page marker, and a next link. That is enough for many docs and archive surfaces.

Larger Archive Range

Use numbered links and ellipsis when the archive is long enough that readers need both local context and a sense of scale.

<PaginationContent>
  <PaginationItem>
    <PaginationLink href="#2" isActive>
      2
    </PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationEllipsis />
  </PaginationItem>
</PaginationContent>

In Context

Pagination should come after the list or grid it controls. Treat it as the final line of the surface, not as a hero element or toolbar control.

Guidance

Preserve Reading Flow

• Place pagination after the archive, results list, or shelf it belongs to.
• Keep the current page obvious with isActive.
• If the user primarily filters or sorts in place, pagination may not be the right primitive.

Choose The Right Level Of Detail

• Use simple previous and next controls for short sequences.
• Add page numbers when direct jumping matters.
• Use ellipsis only when the page range is large enough that compression helps scanability.

Keep Links Semantic

• PaginationLink is an anchor and should navigate somewhere meaningful.
• Use clear href values or route components when wiring real navigation.
• If the surface changes state without navigation, consider whether buttons or tabs describe the interaction more honestly.

API Reference

Root And Link Components

PaginationLink Props

PaginationLink also accepts normal anchor props like href, target, rel, aria-label, and className.