Pagination
A Y2K-styled pagination component featuring thick navy outlines, pastel highlight on the active page, monospace numbers, and Previous/Next buttons with arrow icons.
pagination-demo.app
Installation
terminal.sh
npx y2kui@latest add paginationUsage
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";Parts
| Component | Description |
|---|---|
| Pagination | Nav wrapper with aria-label. |
| PaginationContent | Flex row list container for items. |
| PaginationItem | Single list item wrapper. |
| PaginationLink | Page number button with active state. |
| PaginationPrevious | Previous page link with ChevronLeft icon. |
| PaginationNext | Next page link with ChevronRight icon. |
| PaginationEllipsis | Collapsed pages indicator (···). |
Props
PaginationLink
| Prop | Type | Default | Description |
|---|---|---|---|
isActive | boolean | false | Marks the link as the current page (blue bg + shadow). |
size | "default" | "sm" | "lg" | "default" | Controls the button dimensions. |
asChild | boolean | false | Merge props onto the child element via Radix Slot. |
className | string | - | Additional CSS classes to merge. |
PaginationPrevious / PaginationNext
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merge props onto the child element via Radix Slot. |
className | string | - | Additional CSS classes to merge. |
Examples
With ellipsis
pagination-ellipsis-demo.app