Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Pagination - Small Size
Compact pagination with small sizing using h-7 w-7 and text-xs for space-constrained layouts built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Space is precious—especially on mobile or dense dashboards. This React pagination uses size sm prop with h-7 height, w-7 width, text-xs text, and gap-0.5 spacing for minimal footprint. Built with shadcn/ui and Radix UI, small sizing maintains touch targets while reducing visual weight—perfect for mobile interfaces, table footers, sidebar navigation, or any layout where every pixel counts and users need functional pagination without bulk.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Size
Standard pagination sizing for most use cases
Large Size
Large pagination with h-11 sizing for accessibility
Compact Layout
Minimal pagination without Previous/Next controls
Many Pages
Show all page numbers without ellipsis
Data Table
Paginated table with compact footer
Button Sizes
Button size variants including small
Questions you might have
React Pagination - With First and Last
A comprehensive pagination navigation combining First, Previous, active page, Next, and Last buttons for complete navigation control
React Pagination - Default Size
Standard pagination with default sizing providing optimal balance between usability and visual weight built with shadcn/ui