3

Pagination

Navigation for paginated content, built on Button.

Last updated August 8, 2026

CreditsModifiedPublished

Copied from shadcn/ui.

  • Replaced the multi-icon-library IconPlaceholder abstraction with plain lucide-react ChevronLeftIcon/ChevronRightIcon/MoreHorizontalIcon
  • Replaced physical pl-1.5!/pr-1.5! with logical ps-1.5!/pe-1.5!

Overview

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
 
export function PaginationDemoExample() {
  return (
    <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

$ npx shadcn@latest add https://ui.persian-labs.ir/r/pagination.json

Usage

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
 
export function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

RTL

The chevrons mirror with rtl:-scale-x-100 rather than swapping which icon renders on which side, so "Previous" now correctly points toward the visual right and "Next" toward the visual left.

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
 
export function PaginationRtlExample() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" text="قبلی" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">۱</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            ۲
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">۳</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" text="بعدی" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

API Reference

PaginationLink

PaginationPrevious / PaginationNext

Edit this page on GitHub
PreviousNative SelectNextProgress