Pagination
A set of components for navigating through paginated content.
Installation
npx vayu-ui-cli@latest add paginationUsage
Loading...
Anatomy
import Pagination from "@/components/ui/Pagination";
<Pagination.Root>
<Pagination.Info />
<Pagination.Buttons />
</Pagination.Root>
<Pagination.Compact />Accessibility
- Must include:
- Keyboard support (Tab, Space, Enter navigation for links and buttons)
- ARIA attributes (
aria-label,aria-current="page") - Focus behavior (Focus styles visible, correct semantic HTML elements structure)
Screen reader behavior
- A
<nav>element witharia-label="pagination"lets assistive technologies know the region's purpose. - The active page is indicated using
aria-current="page"on the current page link. - Pagination Info announces visually "Showing X to Y of Z" properly to indicate list size context.
Component Folder Structure
src/components/ui/Pagination
├── CompactPagination.tsx
├── Pagination.tsx
├── PaginationButtons.tsx
├── PaginationInfo.tsx
├── PaginationRoot.tsx
├── index.ts
├── types.ts
└── utils.tsProps
Pagination.Root
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | Content for the pagination |
| aria-label | string | Accessible label for the nav |
Pagination.Info
| Prop | Type | Description |
|---|---|---|
| totalItems | number | Total number of items |
| pageSize | number | Items per page |
| currentPage | number | The current active page |
Pagination.Buttons
| Prop | Type | Description |
|---|---|---|
| currentPage | number | The current active page |
| totalPages | number | Total number of pages |
| hrefBuilder | (page: number) => string | Function returning href |
| pageRange | "compact" | "extended" | "full" | Strategy for rendering page links |
| siblingCount | number | Pages to show around current page |
Pagination.Compact
| Prop | Type | Description |
|---|---|---|
| currentPage | number | The current active page |
| totalPages | number | Total number of pages |
| hrefBuilder | (page: number) => string | Function returning href given a page |