Pagination

Installation

npx shadcn@latest add @fulldev/pagination

Usage

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

<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

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

Simple

A simple pagination with only page numbers.

Icons Only

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

Disabled

Pass disabled to a link at a boundary. It drops its href, leaves the tab order and gets aria-disabled="true".

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

API Reference

Source: src/components/ui/pagination

PaginationLink

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