Home Components Pagination React Pagination Components
15 free React pagination controls built with Tailwind CSS and shadcn/ui conventions. Copy the code or install with the shadcn CLI. Great for tables, lists, and search results.
Pagination 1 : Numbered pagination with Back and Next text links and an enlarged, shadowed active page.Pagination 2 : Pagination with chevron icon arrows on soft grey tiles around borderless rounded page numbers.Pagination 3 : Pagination with a glowing orange active page and Prev and Next links that turn orange on hover.Pagination 4 : Pagination with an emerald tinted active page between green Back and Forward text links.Pagination 5 : Joined pagination bar with dividers between square cells and a solid dark active page.Pagination 6 : Pagination with bordered grey Prev and Next buttons and lightly shadowed rounded page numbers.Pagination 7 : Pagination in a grey tray with first, previous, next and last icon buttons around the pages.Pagination 8 : Pagination with an ellipsis item that shows a Search 10+ more tooltip on hover.Pagination 9 : Minimal pagination where the active page is marked by an indigo underline bar instead of a box.Pagination 10 : Pagination wrapped in a floating translucent card with a blurred backdrop and a deep shadow.Pagination 11 : Previous and Next Step buttons spread across a dashed container with no page numbers, suited to step flows.Pagination 12 : Previous and next buttons at either end with a centred Page 02 / 05 counter pill.Pagination 13 : Compact pill pagination with round arrow buttons on each side of a 2 / 5 page counter.Pagination 14 : Pagination with first and last buttons and a select dropdown to jump straight to any of 10 pages.Pagination 15 : Table footer pagination with a rows per page select, a Showing 1-10 of 100 label and jump buttons.About React Pagination Components A React pagination control lets users move through a long list one page at a time, with previous, next, and numbered links. Watermelon UI pagination is built with Tailwind CSS on semantic nav and list markup, with an isActive link that sets aria-current="page" and an ellipsis for skipped pages. Add one with the shadcn CLI, then compute the page numbers from your data.
When to use it Blog archives and search results with many pages. Tables with more rows than fit on one screen. Product listings where page links should be shareable URLs. When to use something else Use Data Table when pagination is one part of a table with sorting and selection. Use Tabs when there are only a few fixed views, not numbered pages. Use Breadcrumb when users are moving up and down a hierarchy, not through a list. Frequently asked questions How do I disable the previous button on the first page? PaginationPrevious renders a link, so it has no disabled prop; add aria-disabled and className="pointer-events-none opacity-50" on the first page, or leave it out. Do the same for PaginationNext on the last page.
How do I mark the current page? Pass isActive to the matching PaginationLink. It sets aria-current="page" and switches the link to the active style.
How do I use Next.js Link with shadcn pagination? PaginationLink renders an anchor inside the Button, so pass href with a page query such as ?page=2. For client-side routing, build your own link component with the same classes around Next.js Link.
How do I show an ellipsis for skipped pages? Render PaginationEllipsis between page numbers that are not next to each other. A common pattern shows the first page, the last page, and one or two pages on each side of the current one.
How to use React Pagination Components Start from a React project with Tailwind CSS and shadcn/ui set up. Next.js, Vite, Remix, and Astro all work. Run npx shadcn@latest add https://registry.watermelon.sh/r/pagination-1.json to add the source files to your project. Import it where you need it, then edit the Tailwind classes and design tokens to match your product. Dependencies installed with it: @tabler/icons-react.
The code is yours: it lives in your repository, so there is no runtime package to keep updated. Watermelon UI is free and open source under the MIT license.
More: Free React components , UI library alternatives , guides .