Numbered Pagination

Component 44

About

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

Code

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

Usage.tsx

import { useState } from "react";
import { NumberedPagination } from "@/components/ui/numbered-pagination";

const ITEMS_PER_PAGE = 5;
const TOTAL_ITEMS = 50;

function NumberedPaginationDemo() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = Math.ceil(TOTAL_ITEMS / ITEMS_PER_PAGE);

  const items = Array.from({ length: ITEMS_PER_PAGE }, (_, i) => ({
    id: (currentPage - 1) * ITEMS_PER_PAGE + i + 1,
    title: `Item ${(currentPage - 1) * ITEMS_PER_PAGE + i + 1}`,
  }));

  return (
    <div className="flex min-w-[400px] flex-col space-y-4 rounded-lg border p-4">
      <div className="space-y-2">
        {items.map((item) => (
          <div
            key={item.id}
            className="rounded-md bg-muted/50 p-2 text-sm"
          >
            {item.title}
          </div>
        ))}
      </div>

      <NumberedPagination
        currentPage={currentPage}
        totalPages={totalPages}
        paginationItemsToDisplay={5}
        onPageChange={setCurrentPage}
      />
    </div>
  );
}

export { NumberedPaginationDemo };