Components

Pagination

Previous / next and page numbers with ellipses for long ranges. Under 640px it collapses to "Page 3 of 10" between the arrows.

Usage

Use it for:

  • Long tables and lists where people jump to a position.
  • Server-paged data.

Avoid it when:

  • Feeds people read top to bottom: load more on scroll or with a button.
  • Two or three pages of a small list: show everything.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Basic

Few pages

API Reference

Pagination

A <nav>; other <nav> props are forwarded.

PropTypeDefault
page
number
pageCount
number
onPageChange
(page: number) => void
siblingCount
number
1
label
string
"Pagination"
className
string

Accessibility

Keyboard:

  • Tab / Shift+Tab: move between previous, page and next buttons.
  • Enter / Space: go to that page.

ARIA and semantics:

  • <nav aria-label="Pagination"> landmark with a list of buttons.
  • The current page has aria-current="page"; page buttons are named "Page N".
  • Previous / next are disabled (not hidden) at the ends.
  • A polite live region reads "Page N of M" after a change; ellipses are hidden from assistive technology.
  • Under coarse pointers the buttons grow to 36px.
© 2026 Motion. Internal documentation.