Pagination

Pagination helps users navigate through multiple pages of content.

Import


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

Usage

Basic

Preview


<Pagination currentPage={1} totalPages={10} onPageChange={(page) => setPage(page)} />

Different Page Positions

Preview

With Sibling Count

Preview


<Pagination
  currentPage={5}
  totalPages={20}
  siblingCount={2}
  onPageChange={(page) => setPage(page)}
/>

Controlled


const [page, setPage] = useState(1);
 
<Pagination currentPage={page} totalPages={10} onPageChange={setPage} />;

Narrow containers

Below 480px of available width, pagination displays “Page x of y” with previous and next buttons. Wider containers show individual page buttons. With showPrevNext={false}, the numbers wrap instead. Give separate pagination controls distinct aria-label values when a page contains more than one.

Props

Prop	Type	Default	Description
`currentPage`	`number`	—	Current active page (required)
`totalPages`	`number`	—	Total number of pages (required)
`onPageChange`	`(page: number) => void`	—	Page change handler (required)
`siblingCount`	`number`	`1`	Pages shown on each side of current
`showPrevNext`	`boolean`	`true`	Show prev/next buttons
`className`	`string`	—	Additional CSS classes

Accessibility

Uses <nav> with aria-label="Pagination"
Current page marked with aria-current="page"
Prev/Next buttons have proper labels
Keyboard navigation support