Skip to content
Wave 2

Pagination

Navigation between pages of a long list. Server-component safe.

  • Short lists: show everything.
  • Feeds: use "Load more".

Install

Terminal
pnpm dlx shadcn@latest add @acme/pagination

Or import from the package: import { Pagination } from '@acme/react'

Examples

Basic

pagination-basic.tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@/components/ui/pagination'

export default function PaginationBasic() {
  return (
    <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>
          <PaginationLink href="?page=12">12</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="?page=3" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Props

Pagination props
PropTypeDefaultDescription
PaginationLink.isActiveboolean—Marks the current page (aria-current="page").
PaginationLink.hrefstring—Target page URL.

Accessibility

Keyboard
KeyAction
TabMoves between page links
Role
navigation (Pagination) with links
Built in
  • Previous/Next have full names ("Go to next page"); the ellipsis says "More pages".
WCAG 2.2 criteria
2.4.4, 2.4.8, 2.5.8

Don’t

  • Use buttons for page links (pages are URLs).

Tokens

  • color.accent
  • color.input
  • color.ring