Pagination

Navigation 7

About

A page-number navigation with previous/next arrows and an ellipsis for long lists, plus a helper that works out which page numbers to show.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pagination to your project and fits it to your theme.

Code

How Pagination is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  getPaginationRange,
} from "@/components/ui/pagination";

export default function PaginationDemo() {
  const [page, setPage] = React.useState(1);
  const pageCount = 12;
  const entries = getPaginationRange({ page: page, pageCount: pageCount });

  return (
    <div className="flex w-full flex-col items-center gap-4">
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious
              href={page > 1 ? "#" : undefined}
              aria-disabled={page <= 1}
              onClick={(e) => {
                e.preventDefault();
                if (page > 1) setPage((p) => p - 1);
              }}
            />
          </PaginationItem>
          {entries.map((entry, index) =>
            entry === "ellipsis" ? (
              <PaginationItem key={`ellipsis-${index}`}>
                <PaginationEllipsis />
              </PaginationItem>
            ) : (
              <PaginationItem key={entry}>
                <PaginationLink
                  href="#"
                  isActive={entry === page}
                  onClick={(e) => {
                    e.preventDefault();
                    setPage(entry);
                  }}
                >
                  {entry}
                </PaginationLink>
              </PaginationItem>
            ),
          )}
          <PaginationItem>
            <PaginationNext
              href={page < pageCount ? "#" : undefined}
              aria-disabled={page >= pageCount}
              onClick={(e) => {
                e.preventDefault();
                if (page < pageCount) setPage((p) => p + 1);
              }}
            />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
      <p className="text-sm text-muted-foreground">
        Page {page} of {pageCount}
      </p>
    </div>
  );
}