Pagination
A composable pagination component for navigating through paginated content. Use with tables, search results, or any paginated data.
API Reference
usePagination
Hook that computes page ranges with ellipsis and provides navigation helpers.
| Prop | Type | Default | Description |
|---|---|---|---|
| currentPage* | number | - | Current active page (1-indexed) |
| totalPages* | number | - | Total number of pages |
| onPageChange* | (page: number) => void | - | Callback when page changes |
| siblingCount | number | 1 | Number of pages to show on each side of current page |
| pageSize | number | 10 | Current page size |
| pageSizeOptions | number[] | [10, 25, 50, 100] | Available page size options |
| onPageSizeChange | (pageSize: number) => void | - | Callback when page size changes |
PaginationRoot
Navigation container for pagination. Renders as a <nav> with aria-label="pagination".
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"nav"> | - | Standard nav element props |
PaginationContent
List container for pagination items. Renders as a <ul>.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"ul"> | - | Standard ul element props |
PaginationItem
List item wrapper for pagination elements. Renders as a <li>.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"li"> | - | Standard li element props |
PaginationButton
Page number button. Sets aria-current="page" when active.
| Prop | Type | Default | Description |
|---|---|---|---|
| isActive | boolean | false | Whether this button represents the current active page |
| variant | 'default' | 'ghost' | 'default' | Visual style of the button |
| size | 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg' | 'icon-sm' | Size of the button |
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"button"> | - | Standard button element props |
PaginationPrevious / PaginationNext / PaginationFirst / PaginationLast
Directional navigation buttons with built-in aria-labels and disabled state styling.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'ghost' | 'default' | Visual style of the button |
| size | 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg' | 'icon-sm' | Size of the button |
| disabled | boolean | - | Whether the button is disabled |
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"button"> | - | Standard button element props |
PaginationEllipsis
Non-interactive ellipsis indicator for skipped page ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg' | 'icon-sm' | Size of the ellipsis container |
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"span"> | - | Standard span element props |