Pagination

Previous/next navigation between documents, a Previous-minimal + Next-card layout. Router-agnostic: pass href items with a linkComponent (e.g. next/link) or onClick items for in-place callbacks. Used in the document-overlay footer.

Spacing systems

Installation

npx shadcn@latest add https://canvas.blode.co/r/pagination.json

Usage

import Link from "next/link";
import { Pagination } from "@/components/canvas/pagination";
 
// Link items (router-aware)
<Pagination
  linkComponent={Link}
  next={{ href: "/spacing", title: "Spacing systems" }}
  previous={{ href: "/layout", title: "Layout & grids" }}
/>
 
// Callback items (e.g. inside an overlay)
<Pagination
  next={{ onClick: () => go("spacing"), title: "Spacing systems" }}
  previous={{ onClick: () => go("layout"), title: "Layout & grids" }}
/>

Each item is { title, description? } plus either href or onClick. When both previous and next are present, previous renders as a compact control and next as a full card; with only one, it renders as a single card.

Props

Prop	Type	Default	Description
previous	PaginationItem \| null	—	The previous item, or null to hide it.
next	PaginationItem \| null	—	The next item, or null to hide it.
linkComponent	ElementType	"a"	Component used for `href` items (e.g. next/link).
ariaLabel	string	"Pagination"	Accessible label for the nav landmark.
className	string	—	Extra classes for the nav container.