Components

Pagination

Navigation between pages of a result set.

Installation

npx shadcn@latest add @blank/pagination

Usage

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

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

Examples

Labelled

Put text inside PaginationPrevious or PaginationNext and the arrow becomes a labelled button. An arrow without text keeps its aria-label.

Small

Set size once on Pagination; links, arrows and the ellipsis follow it.