Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Advanced

Both Ellipsis Pagination for React

Pagination on page 6 of 20, with an ellipsis on each side of the current page's neighbors.

Framework
UI library

Deep in a long list: the first page, an ellipsis, pages 5 to 7 with page 6 current, another ellipsis and the last page, page 20, between Previous and Next. The row stays the same width wherever the current page is.

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

Which pages does this row show?

PaginationPrevious, page 1, a PaginationEllipsis, pages 5, 6 and 7, a second PaginationEllipsis, page 20, and PaginationNext. Page 6 has isActive, so that link is outline and aria-current="page".

Why are there two ellipses?

The numbers are written out by hand. One PaginationEllipsis sits after page 1, and the other sits before page 20. Each is an aria-hidden span with a more-horizontal icon, not a link.

How do I move the current page?

Change 5, 6 and 7, and put isActive on the current PaginationLink. Leave the links for 1 and 20 at the ends, with an ellipsis in each gap.

How do I give each control a real URL?

Every href here is #. Set href on PaginationPrevious, each numbered PaginationLink, and PaginationNext.

How do Previous and Next know the ends of the list?

In this file they are ordinary links with href="#". Page 6 is only marked with isActive. Leave PaginationPrevious out on page 1 and PaginationNext out on the last page.

How do I rename Previous and Next?

Pass text on PaginationPrevious and PaginationNext. They default to "Previous" and "Next", with accessible names "Go to previous page" and "Go to next page". The nav is labeled "pagination".

All 19 pagination examples