# Scrub Pagination – Drag a Track to Scrub Pages, Ellipsis Morphs into Jump Input

> Scrub Pagination for React and Tailwind CSS (shadcn/ui): page numbers over a thin track that scrubs hundreds of pages at once. It is built to reach page 37 of 120 in one drag. A click slides the pill and rolls the numbers; the dragged handle shows a live “Page 37 / 120” tooltip and snaps on release; the ellipsis morphs into a jump field. onPageChange fires only on commit while onScrub reports the live page; controlled or uncontrolled, a keyboard role="slider" handle, aria-current, reduced motion, light and dark. Use it for data tables, search results and log viewers. The included demo pages through 720 invoices and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Pagination, Navigation, Table, List
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/scrub-pagination

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/scrub-pagination?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/pagination.md