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 Solid, 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.
