Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Advanced

Start Ellipsis Pagination for React

Pagination near the end, with an ellipsis after the first page.

Framework
UI library

Near the end of a list: Previous, the first page, an ellipsis, pages 8 to 10 with page 9 current, and Next. The first page stays reachable in one click.

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, a link for page 1, a PaginationEllipsis, links for 8, 9 and 10, and PaginationNext. Page 9 has isActive.

What does the ellipsis stand in for?

Pages 2 to 7, which this file does not render. PaginationEllipsis is an aria-hidden span with a more-horizontal icon, not a link.

How is page 9 marked current?

isActive sets the outline variant and aria-current="page". Pages 1, 8 and 10 are ghost links. Move isActive if the current page changes, and change the numbers 8, 9 and 10 to match.

How do I give each control a real URL?

Every href is #. Set it on PaginationPrevious, each PaginationLink, and PaginationNext. The nav is labeled "pagination".

How is the first page kept visible?

As its own PaginationLink with the text 1, placed before the ellipsis. It does not have isActive in this file.

How do I change the Previous and Next words?

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