Pagination
Navigation controls for paging through data sets.
Import
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationPrevious,
PaginationNext,
PaginationEllipsis,
} from "@retents/ui/pagination"Usage Guidelines
When to use
- For navigating through paginated data sets like tables, search results, or lists.
- When the dataset is too large to display on a single page and server-side or client-side pagination is used.
When NOT to use
- For "load more" or infinite scroll patterns — use a simple button or scroll-based trigger.
- For navigating between distinct sections of a page — use Tabs instead.
- For step-by-step wizard navigation — use a stepper pattern.
Preview
Usage
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" isActive>2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>