Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Basic

With Ellipsis Pagination for React

Page numbers with an ellipsis before the last page, without Previous and Next.

Framework
UI library

Pages 1 to 3 with page 2 current, an ellipsis and the last page, page 10. It shows how far the list goes without listing every page, and leaves out Previous and Next to stay compact.

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 does this row render?

PaginationLinks for pages 1, 2 and 3, a PaginationEllipsis, and a link for page 10. Page 2 has isActive. There is no Previous or Next.

Is the ellipsis something people can press?

No. PaginationEllipsis is a span with aria-hidden and a more-horizontal icon. Pages 4 to 9 are left out of the row.

How do I mark a different page as current?

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

How do I link the numbered pages?

Each PaginationLink has href="#". Set it to that page's URL. The ellipsis has no href. The nav is labeled "pagination".

How is page 10 different from the ellipsis?

Page 10 is a PaginationLink. The ellipsis is the span between page 3 and page 10. Only the link can navigate.

How do I add Previous and Next to this row?

Put PaginationPrevious in a PaginationItem before page 1, and PaginationNext after page 10. This file does not render either.

All 19 pagination examples