Pagination

Stable

Navigation component with page numbers to split content across multiple pages.

Examples

Basic Usage

tsx
<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>

Neon Variant

tsx
<Pagination variant="neon">...</Pagination>

Ghost Variant

tsx
<Pagination variant="ghost">...</Pagination>

API Reference

PropertyDescriptionTypeDefault
variantVisual style for pagination."default" | "neon" | "ghost"-
isActiveMarks the link as the current active page.boolean-