Data display / Pagination

Pagination

<Pagination />Stable

Page navigation for paged data (search results, long lists). It's a ButtonGroup of Button segments — outer corners round and inner borders seam into one connected bar. The current page is the `secondary` Button (filled); every other control is `outline`. Collapse long ranges with the ellipsis.

import { Pagination, PaginationContent, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from "@/components/upnext";

Variants

Built entirely from Button + ButtonGroup atoms. The active page reads as a filled secondary segment; Prev/Next carry chevron + label (label hides under sm).

{/* a ButtonGroup of Button segments; the current page is the secondary Button */}
<Pagination>
  <PaginationContent>
    <PaginationPrevious href="#" />
    <PaginationLink href="#">1</PaginationLink>
    <PaginationLink href="#" isActive>2</PaginationLink>
    <PaginationLink href="#">3</PaginationLink>
    <PaginationNext href="#" />
  </PaginationContent>
</Pagination>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.