Pagination

A flexible pagination component built from simple HTML elements and the Button component. It provides previous/next links, numbered page links, and an ellipsis indicator for truncated page ranges.

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

export default function PaginationDemo() {
  return (
    <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>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Anatomy

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

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

Examples

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

With ellipsis

Use PaginationEllipsis to indicate truncated page ranges.

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

Custom button text

Override the default "Previous" and "Next" labels using the text prop.

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" text="Newer" />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" text="Older" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

API Reference

Pagination

The root <nav> element with role="navigation" and aria-label="pagination". Centers its content horizontally.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

PaginationContent

A <ul> that lays out pagination items in a horizontal row with a small gap.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

PaginationItem

A <li> wrapper for individual pagination elements.

Prop	Type	Default
`children`	`ReactNode`	—

PaginationLink

An <a> element styled as a Button. Renders as outline variant when active, ghost otherwise.

Prop	Type	Default	Description
`href`	`string`	—	The URL to navigate to.
`isActive`	`boolean`	—	When `true`, applies the `outline` variant and sets `aria-current="page"`.
`size`	`string`	`"icon"`	Button size variant.
`className`	`string`	—
`children`	`ReactNode`	—

PaginationPrevious

A navigation link with a left chevron icon and label text. Uses size="default" by default.

Prop	Type	Default	Description
`href`	`string`	—	The URL to navigate to.
`text`	`string`	`"Previous"`	The label displayed next to the chevron. Hidden on small screens.
`className`	`string`	—

PaginationNext

A navigation link with a right chevron icon and label text. Uses size="default" by default.

Prop	Type	Default	Description
`href`	`string`	—	The URL to navigate to.
`text`	`string`	`"Next"`	The label displayed next to the chevron. Hidden on small screens.
`className`	`string`	—

PaginationEllipsis

A non-interactive <span> that displays a horizontal dots icon with a screen-reader-only "More pages" label.

Prop	Type	Default
`className`	`string`	—