The Pagination

Buttons 1

About

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

Code

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

Usage.tsx

"use client";

import { Pagination } from "@heroui/react";
import { useState } from "react";

export default function PaginationCustomIcons() {
  const [page, setPage] = useState(1);
  const totalPages = 3;

  return (
    <Pagination className="justify-center">
      <Pagination.Content>
        <Pagination.Item>
          <Pagination.Previous
            isDisabled={page === 1}
            onPress={() => setPage((currentPage) => Math.max(1, currentPage - 1))}
          >
            <Pagination.PreviousIcon>
              <svg
                aria-hidden="true"
                className="size-5"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  d="M15 18L9 12L15 6"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                />
              </svg>
            </Pagination.PreviousIcon>
            <span>Back</span>
          </Pagination.Previous>
        </Pagination.Item>

        {Array.from({ length: totalPages }, (_, index) => {
          const pageNumber = index + 1;

          return (
            <Pagination.Item key={pageNumber}>
              <Pagination.Link
                isActive={pageNumber === page}
                onPress={() => setPage(pageNumber)}
              >
                {pageNumber}
              </Pagination.Link>
            </Pagination.Item>
          );
        })}

        <Pagination.Item>
          <Pagination.Next
            isDisabled={page === totalPages}
            onPress={() => setPage((currentPage) => Math.min(totalPages, currentPage + 1))}
          >
            <span>Forward</span>
            <Pagination.NextIcon>
              <svg
                aria-hidden="true"
                className="size-5"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  d="M9 6L15 12L9 18"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                />
              </svg>
            </Pagination.NextIcon>
          </Pagination.Next>
        </Pagination.Item>
      </Pagination.Content>
    </Pagination>
  );
}