Pagination

uistable

Pagination — from shadcn/ui (radix-nova style).

npx shadcn add @krawma/pagination

npm: lucide-react@^1.22.0 · registry: @krawma/button, @krawma/utils

Preview

States

activedisabled

Depends on

buttonutils

Purpose

Navigation across pages of a large result set — numbered page links plus previous/next. Navigational (uses links); for "load more" or infinite scroll, use a button instead.

Anatomy

Pagination (<nav>) › PaginationContent › PaginationItem wrapping PaginationLink (with isActive), PaginationPrevious, PaginationNext, and PaginationEllipsis for gaps.

Style

No variants — links are styled via the button variants (active page emphasized). Collapse long ranges with PaginationEllipsis.

Behavior & functionality

Renders <a> links (real navigation) — wire href/onClick to your router. Mark the current page with isActive; disable prev/next at the ends.

Accessibility

The <nav> should be labelled (e.g. aria-label="Pagination"); the active link carries aria-current="page". Standard link keyboard support applies.

Do / Don't

✅ Mark the current page isActive (→ aria-current); label the nav.
❌ Don't use for infinite/"load more" patterns — use a button.