Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Pagination - With Ellipsis
A pagination component using PaginationEllipsis to show page jumps, displaying pages 1-3, ellipsis, then page 10 for large datasets
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
When you have dozens of pages—show the important ones. This React pagination displays pages 1-3 (page 2 active), PaginationEllipsis indicating skipped pages, then page 10 (last page). Built with shadcn/ui Pagination and Radix UI primitives, ellipsis handles large datasets—perfect for search results (hundreds of items), content archives, product catalogs, or any pagination where showing all pages would overwhelm users but they need access to boundaries and nearby pages.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Complete Pagination
Full pagination with all controls
Five Page Numbers
Pagination without ellipsis
With Previous and Next
Navigation button pagination
Table Pagination
Data table pagination
Dropdown Menu
Page jump dropdown
Select
Page selector component
Questions you might have
React Pagination - With Previous and Next
A pagination component with Previous and Next navigation buttons flanking 3 numbered pages for sequential navigation control
React Complete Pagination
A full-featured pagination component combining Previous/Next buttons, numbered pages 1-3, ellipsis, and last page 10 for comprehensive navigation