shadcn.io is an independent project built on shadcn/ui
Three page links, 1, 2, and 3, sit in a wide row. Page 2 is current. There is no Previous, Next, or ellipsis.
The extra space makes each number an easier target on a calm page, such as a blog. A tight footer wants the compact gap. To step without numbers, use a Button pair. In Svelte, Ark UI does not choose the gap.
Installation
Anatomy
Usage
<Pagination><PaginationContent class="gap-3"><PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem><PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem><PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem></PaginationContent></Pagination>FAQ
Where does the wide spacing come from?
PaginationContent has className="gap-3". That class is the whole difference from a plain row of the same three links.
What does the row render?
Three PaginationLinks, for pages 1, 2 and 3. Page 2 has isActive. There is no PaginationPrevious or PaginationNext.
How is the current page marked?
isActive uses the outline variant and sets aria-current="page" on page 2. Pages 1 and 3 stay ghost. Move isActive to change the current page.
How do I link the three numbers?
Each href is #. Set it to that page's URL. Pagination is a nav labeled "pagination".
API Reference
Pagination
Sets href="#" and isActive. The rest is on the Pagination page.
