Pagination

Page numbers as joined cells, so a run of them reads as one control.

Installation

npx shadcn@latest add @afterglow/pagination

Composition

Component structure.

Pagination
└── PaginationContent
    └── PaginationItem
        ├── PaginationLink
        ├── PaginationPrevious
        ├── PaginationNext
        └── PaginationEllipsis

API Reference

PaginationLink

isActive sets aria-current="page" as well as the styling, so the current page is announced and not only drawn.

Prop	Type	Default
isActive	boolean	false
size	"default" \| "sm" \| "lg" \| "icon" \| "icon-sm"	"icon"