Compact Pagination

Cards 7

About

Compact Pagination

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

Code

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

Usage.tsx

import { useState } from "react";
import { CompactPagination } from "@/components/ui/compact-pagination"

const ITEMS_PER_PAGE = 3;
const TOTAL_ITEMS = 15;

function CompactPaginationDemo() {
  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 w-[300px] 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>

      <CompactPagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={setCurrentPage}
      />
    </div>
  );
}

export { CompactPaginationDemo };