Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Navigation

With Page Counter Pagination for React

Previous and Next around a Page 2 of 10 counter instead of page numbers.

Framework
UI library

Previous and Next around a muted Page 2 of 10 counter. People see where they are without a row of numbers, which suits narrow screens and step-by-step reading.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What sits between Previous and Next?

A span with the literal text "Page 2 of 10" and className="text-muted-foreground text-sm", inside a PaginationItem. It is not a PaginationLink.

Does the counter follow the current page?

No. The string is written in the file. Change the text of that span when the page changes. Nothing in this demo reads a page prop.

What do Previous and Next do here?

They are links with href="#". Default text is "Previous" and "Next", and the accessible names are "Go to previous page" and "Go to next page". The nav is labeled "pagination".

How do I point Previous and Next at real pages?

Replace each href="#" with that page's URL. The counter span has no href.

How do I restyle the counter?

Edit the span's classes. This file uses text-muted-foreground and text-sm so it reads as secondary text between the two controls.

How do I disable Previous on page 1?

This file always renders both controls, and the span still says "Page 2 of 10". Leave PaginationPrevious out on page 1 and PaginationNext out on the last page.

All 19 pagination examples