Pagination

Page navigation with smart ellipsis for large page counts.

Default

import { useState } from 'react'
import { Pagination } from '@canarist/ui'

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

Reference

Prop	Type	Default	Description
page	number	—	Current page number (1-based).
totalPages	number	—	Total number of pages.
onPageChange	(page: number) => void	—	Called when the user navigates to a page.
className	string	—	Additional CSS classes.