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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/pagination/pagination-demo.astro"
---
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>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

## Installation

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

## Usage

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

```astro
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="?page=1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=2" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

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

## Composition

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

## Simple

A simple pagination with only page numbers.

```astro title="src/components/examples/pagination/pagination-simple.astro"
---
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
} from "@/components/ui/pagination"
---

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">4</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">5</PaginationLink>
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

## Icons Only

Use just the previous and next links without page numbers, such as for a data
table with a rows per page selector.

```astro title="src/components/examples/pagination/pagination-icons-only.astro"
---
import { Field, FieldLabel } from "@/components/ui/field"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
---

<div class="flex items-center justify-between gap-4">
  <Field orientation="horizontal" class="w-fit">
    <FieldLabel for="select-rows-per-page">Rows per page</FieldLabel>
    <Select defaultValue="25">
      <SelectTrigger class="w-20" id="select-rows-per-page">
        <SelectValue />
      </SelectTrigger>
      <SelectContent align="start">
        <SelectGroup>
          <SelectItem value="10">10</SelectItem>
          <SelectItem value="25">25</SelectItem>
          <SelectItem value="50">50</SelectItem>
          <SelectItem value="100">100</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
  <Pagination class="mx-0 w-auto">
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious href="#" />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</div>
```

## Disabled

Pass `disabled` to a link at a boundary. It drops its `href`, leaves the tab
order and gets `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>
```

## RTL

Directional icons mirror inside `dir="rtl"`. Pass `text` to translate the
previous and next labels.

```astro title="src/components/examples/pagination/pagination-rtl.astro"
---
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

const translations = {
  en: {
    dir: "ltr",
    values: {
      previous: "Previous",
      next: "Next",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      previous: "السابق",
      next: "التالي",
    },
  },
  he: {
    dir: "rtl",
    values: {
      previous: "הקודם",
      next: "הבא",
    },
  },
} as const

function toArabicNumerals(num: number): string {
  const arabicNumerals = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"]
  return num
    .toString()
    .split("")
    .map((digit) => arabicNumerals[parseInt(digit, 10)])
    .join("")
}

const language: keyof typeof translations = "ar"
const { dir, values: t } = translations[language]

const formatNumber = (num: number): string => {
  if (language === "ar") {
    return toArabicNumerals(num)
  }
  return num.toString()
}
---

<Pagination dir={dir}>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" text={t.previous} />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">{formatNumber(1)}</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        {formatNumber(2)}
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">{formatNumber(3)}</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" text={t.next} />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

## API Reference

Source: [`src/components/ui/pagination`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/pagination)

### 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.

## Install what this page shows

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