Pagination

Overview

Use Pagination when a long list is split into pages.

Pagination is useful for tables, search results, audit logs, directories, and other collections where showing every item at once would be slow or hard to scan.

Anatomy

Pagination usually includes previous and next controls, page links, the current page, and sometimes skipped ranges.

Usage guidance

Use pagination when pages are stable and users need direct access to specific positions. Use infinite loading only when browsing is more important than precise navigation.

Accessibility

Use clear labels for previous and next controls. Mark the current page so screen readers can identify it.

Installation

npm

npx love-ui@latest add pagination

Usage

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

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