Pagination
A pagination with page navigation, next and previous links.
Installation
pnpm dlx shadcn@latest add @columbus/paginationUsage
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="?page=1" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="?page=2" isActive>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationNext href="?page=3" />
</PaginationItem>
</PaginationContent>
</Pagination>;isActive marks the current page with aria-current="page", so screen readers
announce it.
Controlled
Keep the page in state. At the first and last page, remove the href from
Previous or Next and set aria-disabled.
Router links
Pagination links render an <a>. Use render to swap in your router's link.
With render, PaginationLink doesn't add its button styles, so add them with
buttonVariants:
import Link from "next/link";
import { buttonVariants } from "@/components/ui/button";
<PaginationLink
isActive
render={
<Link
className={buttonVariants({ size: "icon", variant: "outline" })}
href="/blog?page=2"
/>
}
>
2
</PaginationLink>;API reference
Pagination is plain HTML: <nav>, <ul>, <li>, and <a>. Each part accepts
the attributes of its element.
Prop
Type