# Pagination Infinite Scroll Sentinel — React Pagination Component

> Infinite scrolling driven by an IntersectionObserver sentinel: shimmer rows appear as you near the end, new rows fade up, and a progress hairline tracks how much is loaded.

- Category: [Pagination](https://pixelpapa.com/components/pagination.md)
- Tags: pagination, infinite scroll, intersection observer, skeleton, feed
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/pagination/pagination-infinite-scroll-sentinel

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/pagination-infinite-scroll-sentinel
```

The file is written to `components/pixelpapa/pagination-infinite-scroll-sentinel.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/pagination/pagination-infinite-scroll-sentinel.

## AI prompt

```text
Add the "Pagination Infinite Scroll Sentinel" component from PixelPapa UI to this project.

What it is: Infinite scrolling driven by an IntersectionObserver sentinel: shimmer rows appear as you near the end, new rows fade up, and a progress hairline tracks how much is loaded.
Category: Pagination. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/pagination-infinite-scroll-sentinel
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/pagination-infinite-scroll-sentinel.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/pagination-infinite-scroll-sentinel.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/pagination-infinite-scroll-sentinel" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More pagination

- [Pagination Dots Morph](https://pixelpapa.com/components/pagination/pagination-dots-morph.md): Dot pagination where the active dot stretches into a pill with a spring and, on autoplay, fills like a story timer before handing over to the next dot.
- [Pagination Jump Input](https://pixelpapa.com/components/pagination/pagination-jump-input.md) (Pro): Pagination built around an editable page field: type a number and press Enter to jump, out-of-range values shake and reset, and a scrubber shows where you are.
- [Pagination Load More](https://pixelpapa.com/components/pagination/pagination-load-more.md) (Pro): A load-more list: the button morphs into a spinner, skeleton rows hold the space, then the new items stagger in and the list scrolls to meet them.
- [Pagination Prev Next Compact](https://pixelpapa.com/components/pagination/pagination-prev-next-compact.md): A compact previous/next pager with a page-of-total readout whose number rolls up or down in the direction you are paging.
- [Pagination Sliding Active](https://pixelpapa.com/components/pagination/pagination-sliding-active.md): Numbered pagination where the active pill springs between pages; deep in the range the numbers reel through the pill instead, and each ellipsis jumps five pages.