Navigation and disclosure · stable · MIT

Pagination

Current-page navigation with previous, next, and ellipsis parts.

Install editable source

Add Pagination

Base UI / canonicalnpx shadcn@latest add https://gummyui.dev/r/gummy-pagination.json

No package dependency beyond React. Shared Gummy material is resolved automatically.

Behavior contract

A labelled nav with list links and aria-current.

Native link behavior.

Light and dark themes, logical RTL layout, reduced motion, responsive content, and forwarded public refs.

Source-derived reference

These public React parts are read directly from the canonical source during the documentation build.

Composes React.AnchorHTMLAttributes<HTMLAnchorElement> & { current?: boolean; size?: "page" | "wide"; }

Composes React.HTMLAttributes<HTMLElement> & { label?: string; }

Troubleshooting

If the material is missing, confirm the registry-installed shared and component CSS files are imported once.
If interaction differs, preserve this contract: Native link behavior.
If assistive output differs, preserve this semantic foundation: A labelled nav with list links and aria-current.
If dark, RTL, or reduced-motion behavior is missing, verify the nearest theme, direction, and media-query boundaries rather than adding page-local overrides.

Live product source

The Component Lab exercises real source across default, focus, disabled, responsive, dark, reduced-motion, and RTL contexts.

Interactive inspection

Resize the canvas, switch its theme, or reverse its reading direction without changing the rest of the page.

Editable source

Loading editable source…