Pagination
Page navigation controls with previous, next, and page links. Install Pagination from the VLLNT UI registry with the shadcn CLI.
Page navigation controls with previous, next, and page links. Part of the navigation family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Pagination to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/pagination.jsonSource
import Link from "next/link";
import { Button } from "../button/button";
export type PaginationProps = {
baseUrl: string;
className?: string;
currentPage: number;
totalPages: number;
};
export function Pagination({
baseUrl,
className,
currentPage,
totalPages,
}: PaginationProps) {
if (totalPages <= 1) return null;
const maxVisiblePages = 5;
let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
if (endPage - startPage + 1 < maxVisiblePages) {
startPage = Math.max(1, endPage - maxVisiblePages + 1);
}
// Previous button
const previousButton =
currentPage > 1 ? (
<Link href={`${baseUrl}?page=${currentPage - 1}`} key="prev">
<Button size="sm" variant="outline">
<span className="text-sm">‹</span>
<span className="sr-only">Previous</span>
</Button>
</Link>
) : null;
// Page numbers
const pageNumbers = Array.from(
{ length: endPage - startPage + 1 },
(_, index) => {
const pageNumber = startPage + index;
return (
<Link href={`${baseUrl}?page=${pageNumber}`} key={pageNumber}>
<Button
size="sm"
variant={pageNumber === currentPage ? "default" : "outline"}
>
{pageNumber}
</Button>
</Link>
);
},
);
// Next button
const nextButton =
currentPage < totalPages ? (
<Link href={`${baseUrl}?page=${currentPage + 1}`} key="next">
<Button size="sm" variant="outline">
<span className="sr-only">Next</span>
<span className="text-sm">›</span>
</Button>
</Link>
) : null;
const pages = [previousButton, ...pageNumbers, nextButton].filter(Boolean);
return (
<div className={`flex items-center justify-center gap-2 ${className}`}>
{pages}
</div>
);
}
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.