Component

Pagination

A lightweight, unstyled wrapper for building page navigation. It forwards native attributes so you can layer in your own page buttons, range logic, and accessibility roles.

Basic

Previous / next controls with a numbered page for each item, tracking the current page in state.

Installation

$pnpm add @refraction-ui/react-pagination

Usage

tsx

import { Pagination } from '@refraction-ui/react'
import { useState } from 'react'

export function MyPager() {
  const totalPages = 5
  const [page, setPage] = useState(1)

  return (
    <Pagination role="navigation" aria-label="Pagination" className="flex items-center gap-2">
      <button disabled={page === 1} onClick={() => setPage((p) => p - 1)}>Previous</button>
      {Array.from({ length: totalPages }, (_, i) => i + 1).map((n) => (
        <button key={n} aria-current={n === page ? 'page' : undefined} onClick={() => setPage(n)}>
          {n}
        </button>
      ))}
      <button disabled={page === totalPages} onClick={() => setPage((p) => p + 1)}>Next</button>
    </Pagination>
  )
}

Truncated range

For larger datasets, render a windowed range with ellipses around the current page and first/last shortcuts.

Props

Prop	Type	Default	Description
`className`	`string`	--	Additional CSS classes applied to the wrapper element.
`...props`	`React.HTMLAttributes<HTMLDivElement>`	--	All standard div attributes are forwarded. Add role="navigation" and aria-label for accessibility.