Pagination
NavigationNavigation controls for paged content. Use pagination to navigate through large datasets or content split across multiple pages.
Import
import { Pagination, CompactPagination } from "@/components/ui/pagination";Usage
Full Pagination
Standard pagination with page numbers
Compact Pagination
Minimal pagination for smaller spaces
Page 1 of 10
Many Pages
Pagination with ellipsis for many pages
Few Pages
Pagination with few pages shows all
API Reference
currentPage*—numberThe current active page
totalPages*—numberTotal number of pages
onPageChange*—(page: number) => voidHandler called when page changes
siblingCount1numberNumber of page buttons to show on each side
| Prop | Type | Default | Description |
|---|---|---|---|
currentPage* | number | — | The current active page |
totalPages* | number | — | Total number of pages |
onPageChange* | (page: number) => void | — | Handler called when page changes |
siblingCount | number | 1 | Number of page buttons to show on each side |