Pagination

When to use #

Use it for

Long result sets where position matters.
Tables and directories.

Skip it when

Feeds; load more instead.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/pagination.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { Pagination } from "@/components/ui/pagination"

export function ResultPages() {
  const [page, setPage] = useState(3);
  return <Pagination page={page} pageCount={12} onPageChange={setPage} />;
}

API reference #

It exposes status semantics, with aria-label, aria-disabled, aria-hidden, aria-atomic and aria-current kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.