Components

Pagination

Compound API for page nav (Previous / numbered pages / Ellipsis / Next). Uses buttonVariants under the hood so buttons match Yuno's outline/ghost styles.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink href="#">10</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>

When to use

  • List pages with 20+ items.
  • Reports that return more rows than fit in one view.

When not to use

  • Infinite-scroll lists — swap for a 'Load more' button.
  • Small lists that fit on one screen.

Usage

Do
  • Show the active page as variant='outline'; the rest as ghost.
  • Include Previous/Next even when disabled.
Don't
  • Don't show every page number when there are more than 7 — use Ellipsis.