Pagination
@/components/kamod-ui/pagination
Installation
Import Pagination primitives from `@/components/kamod-ui/pagination`.
pnpm add @kamod-ch/uiUsage
Compose Pagination with PaginationContent and PaginationItem wrappers. Use PaginationLink for numeric pages (outline when active, ghost otherwise). PaginationPrevious and PaginationNext add chevrons and hide link text on small screens; pass `text` for localization.
import { Pagination } from "@/components/kamod-ui/pagination";<Pagination />Demo
Full navigation: previous, page numbers with an active state, ellipsis, and next — matching the primary shadcn/ui example.
Simple
Numeric pages only — useful when previous/next live elsewhere or the range is small.
Icons only (with rows per page)
Previous and next without page numbers, beside a rows-per-page select — typical for data tables.
API Reference
Props, slots and variants for this component.
Pagination
Pagination component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| PaginationLink isActive | boolean | false |
| PaginationLink size | Button size token | "default" |
| PaginationPrevious / PaginationNext text | string | "Previous" / "Next" |
| PaginationPrevious / PaginationNext children | ComponentChildren | chevron + hidden sm:text (or custom) |
| Pagination class | string | "mx-auto flex w-full justify-center" |
Accessibility Notes
Active page uses `aria-current="page"`. Previous and next expose `aria-label`. Ellipsis is decorative with `aria-hidden` and a screen-reader-only “More pages” label.