Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Pagination - Start Ellipsis
Pagination with start ellipsis showing page 1 then skipping to near-end pages for large datasets built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Long page lists overwhelm—showing pages 1 through 100 crowds navigation. This React Pagination uses PaginationEllipsis at the start to skip from page 1 to later pages (8, 9, 10) when users are near the end. Built with shadcn/ui and Radix UI primitives, the ellipsis indicates hidden pages—perfect for data tables, search results, blog archives, or any paginated content where showing all page numbers impractical and users need quick access to first and last pages.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
End Ellipsis
Ellipsis at end for early 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 Navigation Menu - Mixed Links and Dropdowns
A navigation menu combining dropdowns and direct links using navigationMenuTriggerStyle for consistent styling across interaction types
React Pagination - End Ellipsis
Pagination with end ellipsis showing early pages then skipping to last page for large datasets built with shadcn/ui