‹ components

Pagination

draftv0.9.0·open in canvas

Page controls for long tables — windowed numbers with ellipses.

Installnpx shadcn add @cids/pagination
Live demo

Motion · tap to replay

honors reduced-motion

150ms on background/color only. Page changes re-render the window instantly — no sliding.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Pagination } from "@/design-system";

const [page, setPage] = useState(1);

<Pagination page={page} count={24} onPageChange={setPage} />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

`aria-current="page"` — three non-color cues.no pointer).**Ellipsis**: static`aria-hidden` — never clickable.

Page controls for long tables — windowed numbers with ellipses.

Anatomy

‹  1  …  6  7  8  …  24  ›
│  │  │  └─┬─┘       │   └ next (disabled on last)
│  │  │    └ current ±siblings
│  │  └ ellipsis (aria-hidden)
│  └ first page — always visible
└ prev (disabled on first)

Props

PropTypeDefaultNotes
pagenumber—Current page, 1-based.
countnumber—Total pages.
onPageChange(page: number) => void—Fires for numbers and ‹/›.
siblingsnumber1Pages shown each side of current.
classNamestring—cn-merged onto the nav.

Motion

150ms on background/color only. Page changes re-render the window

instantly — no sliding.

A11y

<nav aria-label="Pagination"> with a list of real buttons — 40px hit

targets (h-10/min-w-10). Prev/next carry explicit labels ("Previous

page"/"Next page"); the current page is aria-current="page".

Callback-driven: if pages are URLs in your app, wrap in links at the

call site instead.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.