Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Accessibility isn't optional—some users need bigger targets. This React pagination uses size lg prop with h-11 height, w-11 width, text-base text, and gap-2 spacing for maximum usability. Built with shadcn/ui and Radix UI, large sizing exceeds WCAG touch target minimums and improves visibility—perfect for touch-heavy mobile apps, accessibility-focused sites, elderly user demographics, kiosk interfaces, or any application where ease of interaction trumps space efficiency.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Size
Standard pagination sizing for most use cases
Small Size
Compact pagination for limited space
Spacious Layout
Increased gap spacing between controls
Button Sizes
Button size variants including large
Standard Pagination
Basic pagination pattern
Data Table
Paginated table implementation
Questions you might have
React Pagination - Default Size
Standard pagination with default sizing providing optimal balance between usability and visual weight built with shadcn/ui
React Pagination - Compact
Minimal pagination layout with page numbers only and tight gap-0.5 spacing, removing Previous/Next controls built with shadcn/ui