Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Start Ellipsis
Next: Both Ellipsis

End Ellipsis

Pagination with end ellipsis showing early pages then skipping to last page for large datasets built with shadcn/ui

Users near the start don't need pages 2 through 99—show what matters. This React Pagination uses PaginationEllipsis at the end to skip from early pages (1, 2, 3) to the last page (10) when viewing beginning pages. Built with shadcn/ui and Radix UI primitives, the ellipsis indicates many pages between—perfect for data tables, product listings, article archives, or any paginated content where users typically start at page 1 and showing all intermediate pages clutters navigation unnecessarily.

End Ellipsis preview

Scroll to load preview

Installation

Start Ellipsis

Ellipsis at start for near-end 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.

Start Ellipsis

Pagination with start ellipsis showing page 1 then skipping to near-end pages for large datasets built with 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