Pagination

Installation

npx vayu-ui init #one time only

npx vayu-ui add pagination

npx vayu-ui add -t pagination #with test case needs

Usage

<Pagination.Root>
  <Pagination.Info 
    totalItems={100} 
    pageSize={10} 
    currentPage={1} 
  />
  <Pagination.Buttons 
    currentPage={1} 
    totalPages={10} 
    hrefBuilder={(page) => `?page=${page}`} 
  />
</Pagination.Root>

<Pagination.Compact
  currentPage={1}
  totalPages={10}
  hrefBuilder={(page) => `?page=${page}`}
/>

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 with aria-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.ts

Props

Pagination.Root

Pagination.Info

Pagination.Buttons

Pagination.Compact