Pagination
shadcn/uiPagination with page navigation, next/previous buttons, and page numbers.
Pagination
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/optics/pagination";<Pagination> <PaginationContent> <PaginationItem> <PaginationPrevious href="#" /> </PaginationItem> <PaginationItem> <PaginationLink href="#"> 1 </PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#" isActive variant="raised" > 2 </PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#"> 3 </PaginationLink> </PaginationItem> <PaginationItem> <PaginationNext href="#" /> </PaginationItem> </PaginationContent></Pagination>import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/optics/pagination";<Pagination> <PaginationContent> <PaginationItem> <PaginationPrevious href="#" /> </PaginationItem> <PaginationItem> <PaginationLink href="#"> 1 </PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#" isActive variant="raised" > 2 </PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#"> 3 </PaginationLink> </PaginationItem> <PaginationItem> <PaginationNext href="#" /> </PaginationItem> </PaginationContent></Pagination>Installation
pnpm dlx shadcn@latest add @optics/pagination
Props
<PaginationLink />
Name | Type | |
|---|---|---|
isActive | boolean(default: false) |