Structure
Pagination
A nav landmark of round page links. The current page carries aria-current.
Show codeHide code
"use client";
import {
Pagination,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationList,
PaginationNext,
PaginationPrevious,
} from "@/registry/lilt/ui/pagination";
export default function PaginationDemo() {
return (
<Pagination>
<PaginationList>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" isActive>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">5</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationList>
</Pagination>
);
}Installation
npx shadcn@latest add @lilt/paginationAccessibility
- A nav landmark labeled 'Pagination'; the current page carries aria-current=page.
- Previous and Next keep text labels, not just arrows.