shadcn.io is an independent project built on shadcn/ui
The row is pages 1, 2, and 3. Page 2 is current. Spacing is the default. There is no Previous, Next, or ellipsis.
Use it for a short set where Previous and Next would add more than they help. The compact row is the same links with a tighter gap. A longer set can jump from a Select. In Vue, Ark UI marks a page current only when you say so.
Installation
Anatomy
Usage
<Pagination>
<PaginationContent>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem>
<PaginationLink href="#" :isActive="true">2</PaginationLink>
</PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
</PaginationContent>
</Pagination>FAQ
What does this simple row render?
Three PaginationLinks, numbered 1, 2 and 3. Page 2 has isActive. There is no Previous, Next, or ellipsis, and PaginationContent has no gap class.
How does isActive change page 2?
It selects the outline variant and sets aria-current="page". Pages 1 and 3 stay ghost. Move isActive to the link that should be current.
How do I link 1, 2 and 3 to real URLs?
Each href is #. Set it to that page's URL. Pagination is a nav labeled "pagination".
How do I tighten or loosen the three links?
Put a gap class on PaginationContent. This file does not, so the gap comes from the cn-pagination-content style (gap-0.5 or gap-1, depending on the style).
API Reference
Pagination
Sets href="#" and isActive. The rest is on the Pagination page.
