---
title: Pagination
description: "Native Astro page links with current-page and previous/next styles."
seo:
    title: "Pagination for Astro — examples and usage"
---

```astro
---
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} 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

```sh
bunx --bun shadcn@latest add @gnosticai/pagination
```

## Usage

```ts
import { Pagination } from "@/components/ui/pagination"
```

Use the Code tab above for the complete Astro composition.

## API reference

Read the [registry source](/r/pagination.json) for the exported parts and prop types.

## When to use Pagination

Build Pagination from a list of PaginationItem parts and real links. Calculate hrefs and the current page in your route or data layer. Set `isActive` on the current PaginationLink so it receives `aria-current="page"`.

## Keyboard and behavior

Navigation stays native and works without a client controller. Omit unavailable previous or next links, or render noninteractive text; an anchor has no native disabled attribute. Keep a useful label when more than one pagination region exists.

## Theme and layout

Number links use Button sizing and surface tokens. Previous and next text can hide at small widths while accessible names remain. Ellipsis is a visual gap, not a control that loads more pages.

## Related choices

Use [Table](/components/table) for paged records and [Button](/components/button) for a separately implemented load-more action.