Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Pagination - First and Last
A boundary-focused pagination with First and Last buttons flanking the active page number for dataset edge navigation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Jump to the edges instantly. This React pagination shows First button, active page 5, and Last button using PaginationLink with custom padding (px-2.5)—boundary navigation without sequential controls. Built with shadcn/ui Pagination and Radix UI primitives, it emphasizes dataset boundaries—perfect for comparison tasks (first vs last items), reference checking (start and end), audit trails, or any navigation where users frequently jump to boundaries rather than browsing sequentially.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
With First and Last
Complete navigation with all controls
Previous and Next Only
Sequential navigation only
Simple Page Numbers
Page numbers without boundaries
Button Group
Grouped button controls
With Page Counter
Navigation with page indicator
Breadcrumb
Hierarchical navigation
Questions you might have
React Pagination - With Page Counter
A pagination navigation with Previous/Next buttons and a centered page counter text showing Page 2 of 10 for orientation
React Pagination - With First and Last
A comprehensive pagination navigation combining First, Previous, active page, Next, and Last buttons for complete navigation control