Shadcn.io is not affiliated with official shadcn/ui
First and Last
A boundary-focused pagination with First and Last buttons flanking the active page number for dataset edge navigation
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.
First and Last preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.