Pagination

Navigate between pages of a paginated result list. Compositional nav built around ghost/outline buttons.

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: "sm" }). 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