Pagination

Controlled navigation for paged contentLink to section

The Pagination component provides composable UI primitives for navigating paged content.

Use it for:

• data tables
• admin lists
• reports
• invoices
• users
• projects
• search results
• paged dashboard views

Pagination is intentionally dumb. It does not own routing, fetching, URL sync, cursor logic, page-size logic, or server state.

The page or data layer owns the logic. The UI renders navigation.

ImportLink to section

import { Pagination } from "@pycolors/ui";

Basic usageLink to section

Pagination is composed from small primitives:

• Pagination → wrapper navigation element
• PaginationContent → list container
• PaginationItem → item wrapper
• PaginationLink → page control
• PaginationPrevious / PaginationNext → directional controls
• PaginationEllipsis → compact overflow indicator

Link compositionLink to section

PaginationLink, PaginationPrevious, and PaginationNext support the asChild composition pattern. Pass a real anchor (or a framework Link) as the child and the control renders it as the root element while preserving all styling, data-slot, accessible labels, and — for PaginationPrevious and PaginationNext — the built-in icon and visible text.

Use Pagination when users need controlled access to a finite set of pages.

Table + PaginationLink to section

This example demonstrates a common SaaS pattern: a Table with local Pagination control.

No backend logic is included. Replace the mock slice with your real data layer later.

buildPaginationRangeLink to section

Use buildPaginationRange to generate compact page tokens with ellipsis.

const tokens = buildPaginationRange({
  page,
  totalPages,
});

The returned tokens can represent:

• page numbers
• active page
• ellipsis markers

This keeps rendering logic clean while keeping Pagination controlled.

Usage patternsLink to section

Pagination vs infinite scrollLink to section

APILink to section

Component

PaginationLink props

PaginationPrevious props

PaginationNext props

buildPaginationRange options

AccessibilityLink to section

Pagination should be understandable and keyboard accessible.

Guidelines:

• use semantic nav with pagination labeling
• mark the active page with aria-current="page"
• keep buttons keyboard accessible
• disable Previous and Next when unavailable
• make ellipsis non-interactive
• avoid tiny click targets in dense layouts
• provide URL sync at the page layer when deep linking matters

Prefer / avoidLink to section

Product copy guidelinesLink to section

Pagination labels should be short and predictable.

Common questionsLink to section

RelatedLink to section