Pagination

Numbered page navigation for splitting a long result list into discrete pages. Reach for it when the full set is too large to scroll and users need to jump to a specific page — for infinite feeds or "load more" lists, skip it. Each page link is a button: the current page renders as outline (sets aria-current="page"), the rest as quiet ghost; collapse long ranges with PaginationEllipsis. PaginationLink takes a size (sm 28px for dense table footers, md 32px default, lg 36px for roomy/standalone bars).

Default

<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>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

With ellipsis (many pages)

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#" isActive>5</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#">6</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink href="#">12</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

Props

Component	Notes
Pagination	<nav aria-label="pagination">, centered flex wrapper
PaginationContent	<ul> with flex + gap-1
PaginationItem	<li> wrapping a link or ellipsis
PaginationLink	<a> styled via buttonVariants({ variant: isActive ? "outline" : "ghost", size }). size defaults to "md" (sm \| md \| lg). isActive sets aria-current="page".
PaginationPrevious	Link with chevron-left + "Previous". Label hidden below sm.
PaginationNext	Link with "Next" + chevron-right. Label hidden below sm.
PaginationEllipsis	size-8 centered horizontal dots, text-muted-foreground. Decorative; aria-hidden.

Source

packages/react/src/components/pagination.tsx · Figma node 2819:28904