Pagination
Page-through controls for long tables, built from links styled as buttons.
Install
pnpm dlx shadcn@latest add @namche/paginationUsage
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from '@/components/ui/pagination';
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="/deployments?page=1" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="/deployments?page=2" isActive>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext href="/deployments?page=3" />
</PaginationItem>
</PaginationContent>
</Pagination>PaginationLink renders through the Button component (variant="outline"
when isActive, ghost otherwise), so page numbers inherit the button's own
named text colour instead of the design tokens' bare-anchor styling.
PaginationPrevious and PaginationNext are the same link with a
direction icon and a label that hides below sm. None of these are
<button> elements — wire real hrefs or a click handler on the <a> to
drive an actual page change.