Multi-page content requires navigation—pagination provides structured access. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's ChevronLeftIcon and ChevronRightIcon for pagination controls with stateful page tracking, disabled boundary states, and page number display. Built on Radix UI with Math.max/Math.min for boundary enforcement and conditional disabled states at first/last pages, the pattern delivers pagination with clear current page indication using default variant for active page and outline variant for other pages. Perfect for data tables in admin interfaces like Stripe or Vercel dashboards navigating large datasets, blog platforms like Medium or WordPress browsing article archives, e-commerce sites like Shopify or Amazon displaying product catalogs, or any content interface with multi-page data—button groups unify pagination controls, disabled states prevent invalid navigation, active variant highlights current position. The dual approach shown (numbered page buttons vs compact page indicator) demonstrates how pagination adapts to different space constraints and data sizes, with numbered buttons serving catalogs with few pages while compact indicators work for datasets with hundreds of pages where showing all numbers would overflow.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/button-group-navigation-1.json

npx shadcn@latest add https://www.shadcn.io/registry/button-group-navigation-1.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-navigation-1.json

bunx shadcn@latest add https://www.shadcn.io/registry/button-group-navigation-1.json

Related patterns you will also like

Questions you might have