---
type: doc
title: Pagination
description: Page navigation with previous, next, numbered, and overflow links.
---

```astro live props={{ name: 'pagination' }}
---
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/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>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

## Installation

```bash
npx shadcn@latest add @fulldev/pagination
```

## Usage

```astro
---
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@/components/ui/pagination"
---

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="?page=1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=2" isActive>
        2
      </PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

Pagination uses normal links, so navigation works without JavaScript. `isActive` sets `aria-current="page"`.

## Examples

### Disabled Boundary

A disabled link has no `href`, is removed from the tab order, and receives `aria-disabled="true"`.

```astro live
---
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
---

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious disabled />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=2" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

### Compact

```astro live
---
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@/components/ui/pagination"
---

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="?page=1" size="sm">
        1
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=2" size="sm" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=3" size="sm">
        3
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=4" size="sm">
        4
      </PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

### RTL

Directional icons mirror when the document or a containing element uses `dir="rtl"`.

```astro live
---
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
---

<div dir="rtl">
  <Pagination aria-label="ترقيم الصفحات">
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious
          href="?page=1"
          text="السابق"
          aria-label="الصفحة السابقة"
        />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext
          href="?page=3"
          text="التالي"
          aria-label="الصفحة التالية"
        />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</div>
```

## Composition

```text
Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationPrevious
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationItem
    │   └── PaginationEllipsis
    └── PaginationItem
        └── PaginationNext
```

## API Reference

### PaginationLink

| Prop       | Type          | Default  | Description                                          |
| ---------- | ------------- | -------- | ---------------------------------------------------- |
| `href`     | `string`      | optional | Link destination.                                    |
| `isActive` | `boolean`     | `false`  | Marks the current page and uses the outline variant. |
| `disabled` | `boolean`     | `false`  | Removes navigation and tab focus.                    |
| `size`     | `Button` size | `"icon"` | Controls link dimensions.                            |

`PaginationPrevious` and `PaginationNext` accept the same link attributes plus a `text` prop. All components forward their native element attributes.

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/pagination) for the component source.