Pagination

Sketch-circled page buttons with a heavier active ring. Prev/next use hand-drawn arrows.

Roughness1.5Lock seed

<Pagination page={2} count={8} onPageChange={setPage} roughness={1.5} />

CLI install

npx doodleui-react add pagination

import { Pagination } from "doodleui-react";

<Pagination page={2} count={8} onPageChange={setPage} />

The current page sets aria-current="page". The nav is labeled "Pagination".

Prop	Type	Default	Notes
page	number	required	1-based current page. Gets aria-current.
count	number	required	Total page count.
onPageChange	(page: number) => void	undefined	Fires for numbered buttons and prev/next.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.