shadcn.io is an independent project built on shadcn/ui
Three page links, 1, 2, and 3, sit in a tight row. Page 2 is current. There is no Previous, Next, or ellipsis.
It fits a table footer or a side panel where width is tight. When the set grows, jump with a Select instead of squeezing in more numbers. In Svelte, Ark UI follows each href, and these point at #.
Installation
Anatomy
Usage
<Pagination><PaginationContent class="gap-0.5"><PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem><PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem><PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem></PaginationContent></Pagination>FAQ
What does this compact row render?
Three PaginationLinks, for pages 1, 2 and 3. There is no PaginationPrevious or PaginationNext. Page 2 has isActive.
Where does the tight spacing come from?
PaginationContent has className="gap-0.5". That is the only spacing class in the file. The links stay inside PaginationItems on that list.
How is the current page marked?
isActive on the page 2 link selects the outline variant and sets aria-current="page". The other two links stay ghost. Move isActive when the current page changes.
How do I link these numbers to real pages?
Each PaginationLink has href="#". Replace # with that page's URL. Pagination is a nav labeled "pagination".
API Reference
Pagination
Sets href="#" and isActive. The rest is on the Pagination page.
