Shadcn Pagination

Pagination is a nav of page links. Previous, a few numbers, an ellipsis when the range is long, and next. Use it under a table, a catalog, or search results when each page should have its own URL.

Usage

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

<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>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

isActive is the current page — outline variant and aria-current="page".

Composition

Simple

Page numbers only. No previous, no next — just the range they can see.

Icons Only

Previous and next, no numbers. Pair it with a rows-per-page Select under a data table.

RTL

Wrap with DirectionProvider and dir="rtl". Previous / Next copy lives in the component file.

API

Pagination is a nav with aria-label="pagination". Override the label if two pagers share the page.

PaginationLink

PaginationPrevious and PaginationNext are PaginationLinks with size="default" and hardcoded Previous / Next labels. PaginationEllipsis is a span with a more-pages icon.

Notes

PaginationLink is an <a>. Swap it for Next.js Link in pagination.tsx if you want client navigation.

With other components

Questions

Related