Pagination
Page navigation with previous, next, page links, and ellipsis indicators — composed from the Button variants.
Install
npx shadcn@latest add https://atomx.acau.net/r/pagination.jsonUsage
Pagination is composition-first: build the link list from PaginationContent + PaginationItem, then drop PaginationPrevious, PaginationLink, PaginationEllipsis, and PaginationNext inside as needed. All links render as plain <a> tags so they work in any framework — wire them to your router by setting href and an onClick handler, or render through a router-aware link component using asChild patterns on the underlying Button.
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="?page=1" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="?page=2" isActive>2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext href="?page=3" />
</PaginationItem>
</PaginationContent>
</Pagination>Preview
Props
| Component | Notable props |
|---|---|
Pagination | Plain <nav> with role="navigation" and aria-label="pagination". |
PaginationContent | Flex list wrapper (<ul>). |
PaginationItem | <li> wrapper for a single entry. |
PaginationLink | href, isActive (renders with the outline button variant), size (defaults to "icon"). |
PaginationPrevious / PaginationNext | Pre-styled previous/next links with chevron icons and a "default" size. |
PaginationEllipsis | Visual "more pages" indicator (decorative, aria-hidden). |
Pagination declares button as a registry dependency — it composes the shared buttonVariants from button.tsx to keep link styling in sync with the rest of the app.
Navigation Menu
A collection of links for navigating websites, with viewport, indicator, and rich dropdown content panels — built on Radix UI's NavigationMenu primitive.
Popover
A floating content panel anchored to a trigger, built on Radix UI's Popover primitive with portal rendering and smooth animations.