Pagination

Page navigation with numbered controls, next, and previous links.

Preview

Installation

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

API Reference

This is a custom component, not a Base UI wrapper.

Pagination

Root navigation container with role="navigation" and aria-label="pagination".

PaginationContent

Unordered list container for pagination items.

PaginationItem

Individual list item container.

Link element for page numbers. Renders as a Button with mode="stroke" and variant="neutral".

PaginationPrevious

Link to the previous page. Includes a chevron left icon. Pass children to add a text label.

PaginationNext

Link to the next page. Includes a chevron right icon. Pass children to add a text label.

PaginationEllipsis

Ellipsis indicator for skipped pages. Displays "..." with aria-hidden.

Examples

Rounded