Pagination

Pagination helps users navigate through multiple pages of content.

Import


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


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


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


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

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
`boundaryCount`	`number`	`1`	Pages shown at start/end
`showPrevNext`	`boolean`	`true`	Show prev/next buttons
`className`	`string`	—	Additional CSS classes