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

npx shadcn@latest add @fulldev/pagination

Usage

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

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

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

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

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 for the component source.

Sidebar

Search