Pagination

Links between the pages of a list: previous, next, the page numbers, and gaps for the pages in between.

Installation

npx rasengan-ui add pagination

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/pagination.json

Usage

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
 
export function Usage() {
  return (
    <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>
  );
}

Sizes and the first page

size on Pagination sets every link at once: square buttons for the numbers, matching heights for Previous and Next. On the first or last page, give the link aria-disabled="true" and no href: it dims and stops clicks.

Links are <a>s; give your router's link in render (render={<Link to="?page=2" />}), as with Breadcrumb.

Villages

The links are buttons, ghost with the current page outlined, so they take the village's radius, border and press.

Accessibility

• A <nav> landmark named "Pagination" (change it with aria-label when a page has several).
• The current page carries aria-current="page". Previous and Next are named "Go to the previous page" and "Go to the next page"; on phones their words are hidden and the chevrons stay.
• The ellipsis is read as "More pages".

API reference