Pagination

Composable controls for paginated lists — previous/next, page links, ellipsis, and a page-size select.

Basic

Numbered links with previous and next controls.

<Pagination label="Pagination">
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious label="Previous page" onClick={…} />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink isActive>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext label="Next page" onClick={…} />
    </PaginationItem>
  </PaginationContent>
</Pagination>

With ellipsis

Truncates the middle when there are many pages.

With page size

Combine `PaginationPageSize` with the nav controls when the consumer needs to change how many rows are shown.

Rows per page

Composable parts modeled after shadcn — full field tables and patterns: shadcn/ui — Pagination