Skip to content
Cuelark UI
Navigation

Pagination

Crawlable pagination links with a page-range helper.

Pagination splits long lists into pages. Cuelark pagination uses real links so every page is crawlable, highlights the current page as a raised key, and ships pageRange(), which works out the visible pages and ellipses for you.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/pagination.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/pagination.

Usage

import { Pagination, PaginationContent, PaginationItem, PaginationLink, pageRange } from "@/components/ui/pagination";

{pageRange(page, total).map((p) => (
  <PaginationItem key={p}><PaginationLink href={`?page=${p}`} isActive={p === page}>{p}</PaginationLink></PaginationItem>
))}

API reference

PaginationLink

PropTypeDefaultDescription
isActiveboolean—Marks the current page (aria-current).
asChildboolean—Use your router's Link.

pageRange(current, total, siblings = 1)

Returns (number | "…")[].

Pagination · PaginationContent · PaginationItem · PaginationPrevious · PaginationNext · PaginationEllipsis

Accessibility

  • <nav aria-label="Pagination"> with a list of links.
  • Previous and Next have explicit aria-labels.

FAQ

Also searched as: react pagination · shadcn pagination · pagination component · seo pagination · table pagination