Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Pagination - Compact
Minimal pagination layout with page numbers only and tight gap-0.5 spacing, removing Previous/Next controls built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes Previous/Next just clutters—users can see all pages anyway. This React pagination strips down to essentials with page numbers only and gap-0.5 spacing for ultra-compact layout. Built with shadcn/ui and Radix UI, removing navigation controls works when total pages visible (5-7 pages), users can directly click target page, or space critically limited—perfect for mobile interfaces, table footers, slideshow indicators, or minimalist designs where simplicity and space efficiency matter more than explicit navigation affordance.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Spacious Layout
Page numbers only with increased gap spacing
Small Size
Compact pagination with Previous/Next controls
Many Pages
Show all page numbers without ellipsis
Standard Pagination
Full pagination with all controls
Button Group
Grouped buttons for related actions
Carousel
Image carousel with dot indicators
Questions you might have
React Pagination - Large Size
Accessible pagination with large sizing using h-11 w-11 and increased spacing for improved touch targets built with shadcn/ui
React Pagination - Spacious
Pagination with page numbers only and generous gap-3 spacing for clear visual separation and improved touch precision built with shadcn/ui