Pagination

Pagination splits long content into numbered pages with previous and next controls. Use it for search results, tables, or any list too long for a single view. It renders links, so wire each PaginationLink to your own page state or route.

Preview

Installation

npx shadcn@latest add @cubby-ui/pagination

Usage

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/cubby-ui/pagination";

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Composition

Pagination
└── PaginationContent
    └── PaginationItem
        ├── PaginationPrevious
        ├── PaginationLink
        ├── PaginationEllipsis
        └── PaginationNext

Mark the current page with isActive on its PaginationLink, and use isDisabled to gray out unavailable controls.

Examples

Interactive

Drive the active page from state and update it from each PaginationLink.

With Ellipsis

Use PaginationEllipsis to collapse skipped page ranges when there are many pages.

Minimal

Drop the numbered links to leave only PaginationPrevious and PaginationNext.

Accessibility

The Pagination root is a labeled nav landmark. PaginationLink sets aria-current="page" when isActive, and PaginationEllipsis is hidden from assistive tech with a visually hidden "More pages" label.

API Reference

Pagination is a set of custom navigation parts built from plain HTML elements. PaginationLink styles itself with buttonVariants from Button, so all props below are specific to this implementation. Each part also accepts the standard props for its underlying element (nav, ul, li, a, or span).

Props

PaginationLink

Single page link, rendered as an a styled with buttonVariants. PaginationPrevious, PaginationNext, and the numbered links all build on it.