Pager

A flexible pagination component with support for multiple alignments, compact modes, and custom iconography.

Preview & Interactive Laboratory

Alignments

Left Aligned

Center Aligned (Default)

Right Aligned

Compact Mode

Minimalist Compact

Compact without Labels

Custom Iconography

Arrows instead of Chevrons

Custom Styled Compact

Large Datasets

Auto-truncation with Ellipses (50 pages)

Usage & Implementation

import { Pager } from "@/components/ui/pager"

<Pager 
  currentPage={page} 
  totalPages={10} 
  onPageChange={setPage} 
/>
React / Tailwind

Granular Customization

1

Container

The pager layout wrapper.

className={`className`}
2

Buttons

Individual page number triggers.

className={`variant='compact'`}
3

Alignment

Control the horizontal position.

className={`align='left'|'center'|'right'`}

API Reference (Props)

PropTypeDefaultDescription
currentPagenumber1The currently active page index.
totalPagesnumber-The total number of available pages.
onPageChangefunction-Page transition callback.
variant'default' | 'compact''default'Visual density of the pager.