Shadcn.io is not affiliated with official shadcn/ui
Both Ellipsis
Pagination with ellipsis on both sides showing first page, middle pages, and last page for very large datasets built with shadcn/ui
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.
Both Ellipsis preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.