Pagination
Navigation for paginated content, built on Button.
Last updated January 1, 1980
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
Installation
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>
)
}Examples
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.