Pagination
A flexible and animated pagination component with active and hover states.
Installation
npx shadcn@latest add https://scrollx-ui.vercel.app/registry/pagination.json 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)