Pagination

Native Astro page links with current-page and previous/next styles.

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

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

Usage

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

Use the Code tab above for the complete Astro composition.

API reference

Read the registry source 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 for paged records and Button for a separately implemented load-more action.