Pagination
shadcn/ui
Page navigation controls. Use with DataTable or a ticket list.
@/components/ui/paginationLive demo — 10 pages
Current page: 5 / 10
Boundary states
| State | Preview | Note |
|---|---|---|
| First page | Previous disabled — pointer-events-none opacity-50 | |
| Last page | Next disabled — pointer-events-none opacity-50 | |
| Few pages (no ellipsis) | ≤ 7 pages — show all, no ellipsis needed |
In context — ticket table footer
IDDescriptionStatusAssignee
T7A3763Login button issueOpenDragana V.
T7A3764Login button issueOpenDragana V.
T7A3765Login button issueOpenDragana V.
Showing 3 of 47 tickets
Tokens
| Element | Token |
|---|---|
| Page number | hover:bg-accent hover:text-accent-foreground — ghost button style |
| Active page | bg-accent text-accent-foreground — via isActive={true} |
| Ellipsis | text-muted-foreground — non-interactive |
| Prev / Next | flex items-center gap-1 — label + Chevron icon |
| Disabled | pointer-events-none opacity-50 — apply manually on first/last page |
Sub-components
| Component | Role |
|---|---|
| Pagination | Root nav element — renders as <nav aria-label="pagination navigation"> |
| PaginationContent | Flex container for page items — gap-1 |
| PaginationItem | Wrapper for each page control |
| PaginationLink | Page number button — isActive prop sets accent background |
| PaginationPrevious | ← Previous button — disable manually when on first page |
| PaginationNext | Next → button — disable manually when on last page |
| PaginationEllipsis | … indicator for skipped page ranges — non-interactive |
Pagination is link-based. For SPA navigation, pass href="#" and use onClick + e.preventDefault().
On this page