Pagination
Page navigation with previous/next and numbered links.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/pagination.jsonUsage
Links are plain anchors, so they work with URL-driven pagination out of the
box; for client-side state swap href for onClick.
import {
Pagination, PaginationContent, PaginationItem,
PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
} from "@/components/ui/pagination";
<Pagination>
<PaginationContent>
<PaginationItem><PaginationPrevious href={`?page=${page - 1}`} /></PaginationItem>
<PaginationItem><PaginationLink href="?page=1" isActive={page === 1}>1</PaginationLink></PaginationItem>
<PaginationItem><PaginationNext href={`?page=${page + 1}`} /></PaginationItem>
</PaginationContent>
</Pagination>For table-embedded pagination, Data Table ships its own controls.
Accessibility
navlandmark labeled "Pagination"; the active page hasaria-current="page"; previous/next carry descriptivearia-labels.