Pagination

A flexible and animated pagination component with active and hover states.

Installation

npx scrollx-ui@latest add pagination

Usage

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

<Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" onClick={handlePrevious} />
        </PaginationItem>
        {[1, 2, 3].map((page) => (
          <PaginationItem key={page}>
            <PaginationLink
              href="#"
              isActive={activePage === page}
              onClick={() => handlePageClick(page)}
            >
              {page}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" onClick={handleNext} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>

API Reference

Pagination

Root container (className, nav props)

PaginationContent - Wraps items (className, ul props)

PaginationItem - Single item wrapper (className, li props)

PaginationLink - Page link (isActive, shiny, shinySpeed, size, variant, className, a props)

PaginationPrevious - "Previous" button (PaginationLink props)

PaginationNext - "Next" button (PaginationLink props)

PaginationEllipsis - Ellipsis ("...") (className, span props)