Shadcn.io is not affiliated with official shadcn/ui
Disabled State
Pagination with disabled Previous button using pointer-events-none and opacity-50 for boundary pages built with shadcn/ui
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.
Disabled State preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.