Shadcn.io is not affiliated with official shadcn/ui
Start Ellipsis
Pagination with start ellipsis showing page 1 then skipping to near-end pages for large datasets built with shadcn/ui
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.
Start Ellipsis preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.