Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Pagination - Simple Page Numbers
A minimal pagination component showing 3 numbered page links with active state highlighting using shadcn/ui Pagination
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes you just need page numbers—no arrows, no ellipsis, just 1-2-3. This React pagination shows 3 pages with page 2 active using isActive prop on PaginationLink. Built with shadcn/ui Pagination and Radix UI primitives, it handles the simplest case—short paginated lists, limited datasets, or minimal designs where Previous/Next buttons add unnecessary complexity for just a few pages.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Five Page Numbers
Extended page number range
With Previous and Next
Page numbers plus navigation
Complete Pagination
Full pagination with ellipsis
Button Group
Grouped button actions
Tabs
Tab-based navigation
Breadcrumb
Hierarchical navigation
Questions you might have
React Pagination - Disabled State
Pagination with disabled Previous button using pointer-events-none and opacity-50 for boundary pages built with shadcn/ui
React Pagination - Five Page Numbers
A pagination component displaying 5 consecutive numbered page links with active page 3 highlighted for medium-length datasets