Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Middle pages are the hardest—users aren't at start or end. This React Pagination uses PaginationEllipsis on both sides to show page 1, skip to middle pages (5, 6, 7), then skip again to last page (20). Built with shadcn/ui and Radix UI primitives, dual ellipsis maximizes space efficiency—perfect for very large datasets, search results with hundreds of pages, extensive archives, or any scenario where total pages exceed 15 and current page far from both boundaries requiring compact navigation.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Start Ellipsis
Ellipsis at start for near-end pages
End Ellipsis
Ellipsis at end for early 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