Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Pagination - With Previous and Next
A pagination component with Previous and Next navigation buttons flanking 3 numbered pages for sequential navigation control
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Users expect arrow buttons—it's pagination convention. This React pagination adds PaginationPrevious and PaginationNext components flanking pages 1-3 (page 2 active), providing familiar Previous/Next navigation alongside direct page access. Built with shadcn/ui Pagination and Radix UI primitives, the arrow buttons offer standard sequential navigation—perfect for any paginated content, expected UX patterns, accessible keyboard navigation, or meeting user expectations for standard pagination controls.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Page Numbers
Numbers without navigation buttons
Complete Pagination
Full pagination with ellipsis
Five Page Numbers
Extended page range
Icon Button
Icon-only button component
Table Pagination
Data table with pagination
Carousel Controls
Previous/Next carousel buttons
Questions you might have
React Pagination - Five Page Numbers
A pagination component displaying 5 consecutive numbered page links with active page 3 highlighted for medium-length datasets
React Pagination - With Ellipsis
A pagination component using PaginationEllipsis to show page jumps, displaying pages 1-3, ellipsis, then page 10 for large datasets