Pagination

Component Installation Guide

npx shadcn@latest add pagination

Implementing Pagination Controls

  Pagination, // The root container component for the entire pagination control set.
  PaginationContent, // A container for the pagination items (links, ellipsis, etc.).
  PaginationEllipsis, // Renders an ellipsis (...) indicator, typically used when there are many pages.
  PaginationItem, // A wrapper component for individual pagination elements like links or ellipsis.
  PaginationLink, // Renders a link for a specific page number or previous/next action.
  PaginationNext, // A specialized PaginationLink for the "Next" page action.
  PaginationPrevious, // A specialized PaginationLink for the "Previous" page action.
} from "@/components/ui/pagination"; // Adjust import path as necessary.

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

The structure involves wrapping all pagination elements within <Pagination> and <PaginationContent>. Each interactive element (<PaginationPrevious>, <PaginationLink>, <PaginationNext>, <PaginationEllipsis>) should be wrapped in a <PaginationItem>. You typically map over your page data or use logic to determine which page numbers, ellipsis, and previous/next links to display based on the current page and total number of pages. The href prop should point to the URL for the corresponding page. Use the isActive prop on <PaginationLink> to highlight the current page.

Integration with Next.js Routing

By default, the <PaginationLink />, <PaginationPrevious />, and <PaginationNext /> components render standard HTML <a> tags. If you are using Next.js for client-side routing, you'll want these components to render Next.js <Link> components instead for optimal performance and behavior.

To achieve this, you need to modify the source code of the pagination.tsx component file after adding it to your project:

+ import Link from "next/link"

- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>

const PaginationLink = ({...props }: ) => (
  <PaginationItem>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </PaginationItem>
)