# Pagination (/docs/components/pagination)



<ComponentPreview name="pagination-demo" />

## Overview [#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 [#anatomy]

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

## Usage guidance [#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 [#accessibility]

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

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add pagination
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="pagination" title="components/ui/pagination.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

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

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