Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Advanced

End Ellipsis Pagination for React

Pagination near the start, with an ellipsis before the last page.

Framework
UI library

Near the beginning of a list: Previous, pages 1 to 3 with page 2 current, an ellipsis, the last page and Next. The ellipsis stands for the pages between 3 and 10.

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

Where does the ellipsis sit in this row?

After pages 1, 2 and 3, and before the link for page 10. Page 2 has isActive. PaginationPrevious opens the row and PaginationNext closes it.

What is PaginationEllipsis here?

A span with aria-hidden and a more-horizontal icon. It is not a link. Pages 4 to 9 are not rendered. The nav is labeled "pagination".

How do I mark another page as current?

Move isActive to that PaginationLink. isActive sets the outline variant and aria-current="page". This file hardcodes the numbers, so change 1, 2, 3 and 10 yourself.

How do I give these controls real URLs?

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

How is the last page shown?

As a PaginationLink whose text is 10, after the ellipsis. It does not have isActive in this file.

How do I change the Previous and Next labels?

Pass text. They default to "Previous" and "Next", with accessible names "Go to previous page" and "Go to next page". The label span uses hidden sm:block.

All 19 pagination examples