Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Pagination - Disabled State
Pagination with disabled Previous button using pointer-events-none and opacity-50 for boundary pages built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Previous button on page 1 should be disabled—clicking does nothing. This React Pagination uses pointer-events-none opacity-50 classes on PaginationPrevious when on first page to prevent interaction and indicate unavailability. Built with shadcn/ui and Radix UI primitives, disabled states provide clear feedback—perfect for any paginated content where boundary conditions (first page, last page) need visual and functional indicators preventing invalid navigation attempts and communicating current position.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard Pagination
Basic pagination with enabled controls
Start Ellipsis
Ellipsis pattern with Previous/Next
Many Pages
All page numbers without controls
Disabled Button
Disabled button states
Data Table
Paginated data table
Disabled Input
Disabled form controls