Pagination

A navigation component for paginated content.

Basic Pagination

Current Page: 1 of 10

With More Pages

With Custom Sibling Count

Usage

import { useState } from "react"
import { Pagination } from "@/components/pagination"

export default function MyComponent() {
  const [currentPage, setCurrentPage] = useState(1)
  const totalPages = 10
  
  return (
    <Pagination
      currentPage={currentPage}
      totalPages={totalPages}
      onPageChange={setCurrentPage}
    />
  )
}

Props

Name
Type
Default
Description
currentPage
number
required
The current active page number.
totalPages
number
required
The total number of pages.
onPageChange
function
required
Function called when a page is selected.
siblingCount
number
1
Number of siblings to show on each side of the current page.
className
string
undefined
Additional CSS classes to apply to the pagination component.