Documentation Index
Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
Use this file to discover all available pages before exploring further.
Installation
npx shadcn@latest add pagination
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination"
<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>
Component API
The root pagination component.
function Pagination({ className, ...props }: React.ComponentProps<"nav">)
function PaginationContent({ className, ...props }: React.ComponentProps<"ul">)
function PaginationItem({ ...props }: React.ComponentProps<"li">)
type PaginationLinkProps = {
isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, "size"> &
React.ComponentProps<"a">
function PaginationLink({
className,
isActive,
size = "icon",
...props
}: PaginationLinkProps)
isActive - Whether this page is currently activesize - Button size variant (default: "icon")
Previous page navigation button.
function PaginationPrevious({
className,
...props
}: React.ComponentProps<typeof PaginationLink>)
function PaginationNext({
className,
...props
}: React.ComponentProps<typeof PaginationLink>)
function PaginationEllipsis({
className,
...props
}: React.ComponentProps<"span">)
Examples
A simple pagination with only page numbers:
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" isActive>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">3</PaginationLink>
</PaginationItem>
</PaginationContent>
</Pagination>
Icons Only
Use just the previous and next buttons without page numbers:
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>
Next.js Integration
To use the Next.js <Link /> component with pagination:
import Link from "next/link"
// Update the PaginationLink type
type PaginationLinkProps = {
isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, "size"> &
React.ComponentProps<typeof Link>
// Update the component to use Link
const PaginationLink = ({ ...props }: PaginationLinkProps) => (
<PaginationItem>
<Link {...props}>
{/* ... */}
</Link>
</PaginationItem>
)