Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Pagination - End Ellipsis
Pagination with end ellipsis showing early pages then skipping to last page for large datasets built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Users near the start don't need pages 2 through 99—show what matters. This React Pagination uses PaginationEllipsis at the end to skip from early pages (1, 2, 3) to the last page (10) when viewing beginning pages. Built with shadcn/ui and Radix UI primitives, the ellipsis indicates many pages between—perfect for data tables, product listings, article archives, or any paginated content where users typically start at page 1 and showing all intermediate pages clutters navigation unnecessarily.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Start Ellipsis
Ellipsis at start for near-end pages
Both Ellipsis
Ellipsis on both sides for middle pages
Standard Pagination
Basic pagination without ellipsis
Many Pages
Show all page numbers without ellipsis
Disabled State
Disabled pagination controls
Data Table
Paginated data table
Questions you might have
React Pagination - Start Ellipsis
Pagination with start ellipsis showing page 1 then skipping to near-end pages for large datasets built with shadcn/ui
React Pagination - Both Ellipsis
Pagination with ellipsis on both sides showing first page, middle pages, and last page for very large datasets built with shadcn/ui