Pagination with page navigation, next and previous links.
Installation
$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/pagination.json"
Copy Usage
After you add the component with the CLI, import it from your UI folder:
Copy import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination"
export function PaginationDemo () { return ( < Pagination > < PaginationContent > < PaginationItem > < PaginationPrevious href = "#" /> </ PaginationItem > < PaginationItem > < PaginationLink href = "#" >1</ PaginationLink > </ PaginationItem > < PaginationItem > < PaginationLink href = "#" isActive > 2 </ PaginationLink > </ PaginationItem > < PaginationItem > < PaginationLink href = "#" >3</ PaginationLink > </ PaginationItem > < PaginationItem > < PaginationNext href = "#" /> </ PaginationItem > </ PaginationContent > </ Pagination > ) } Examples
With Ellipsis
Use PaginationEllipsis to represent skipped pages when dealing with a large dataset.
API Reference
The pagination component uses standard HTML semantic tags (<nav>, <ul>, <li>) styled with Tailwind CSS.
Prop Type Default Description isActivebooleanfalseApplies active state styling to a PaginationLink. sizeenum"icon"Size of the PaginationLink (inherits from Button sizes).