Pagination

Installation

npx shadcn@latest add pagination

yarn dlx shadcn@latest add pagination

pnpm dlx shadcn@latest add pagination

Usage

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

PaginationContent

Container for pagination items.

function PaginationContent({ className, ...props }: React.ComponentProps<"ul">)

PaginationItem

Wrapper for individual pagination elements.

function PaginationItem({ ...props }: React.ComponentProps<"li">)

PaginationLink

Clickable pagination link with active state support.

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, "size"> &
  React.ComponentProps<"a">

function PaginationLink({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps)

Props:

isActive - Whether this page is currently active
size - Button size variant (default: "icon")

PaginationPrevious

Previous page navigation button.

function PaginationPrevious({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>)

PaginationNext

Next page navigation button.

function PaginationNext({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>)

PaginationEllipsis

Ellipsis indicator for skipped pages.

function PaginationEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">)

Examples

Simple Pagination

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

​Installation

​Usage

​Component API

​Pagination

​PaginationContent

​PaginationItem

​PaginationLink

​PaginationPrevious

​PaginationNext

​PaginationEllipsis

​Examples

​Simple Pagination

​Icons Only

​Next.js Integration