shadcn.io is an independent project built on shadcn/ui
Five page links sit in a row: 1, 2, 3, 4, and 5. Page 3 is current. There are no other controls.
It fits a short gallery or a form that is only five pages. Past that, jump with a Select instead of listing every page. In Svelte, Ark UI follows each href, and these point at #.
Installation
Anatomy
Usage
<Pagination><PaginationContent><PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem><PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem><PaginationItem><PaginationLink href="#" isActive>3</PaginationLink></PaginationItem><PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem><PaginationItem><PaginationLink href="#">5</PaginationLink></PaginationItem></PaginationContent></Pagination>FAQ
Which page links does this row render?
Five PaginationLinks, numbered 1 through 5. Page 3 has isActive. There is no PaginationPrevious, PaginationNext, or PaginationEllipsis.
How is page 3 shown as current?
isActive selects the outline variant and sets aria-current="page". The other four links stay ghost. Move isActive to mark a different link.
How do I show a different run of five pages?
The numbers are hardcoded. Replace 1, 2, 3, 4 and 5, and put isActive on the current one. PaginationContent has no extra gap class in this file.
How do I link each number to its page?
Every href is #. Set each PaginationLink's href to that page's URL. The nav is labeled "pagination".
API Reference
Pagination
Sets href="#" and isActive. The rest is on the Pagination page.
