Pagination

Component

Navigation component for paginated content with page numbers and controls.

Installation & Usage

Basic Usage

import { Pagination } from 'dotti'

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

Examples

Basic Pagination

Simple pagination with current page highlighting.

Page 1 of 10

⋯

Code

const [currentPage, setCurrentPage] = useState(1)

<Pagination
  currentPage={currentPage}
  totalPages={10}
  onPageChange={setCurrentPage}
/>

Pagination with Siblings

Control how many page numbers show around the current page.

Showing 2 siblings on each side

⋯

Code

<Pagination
  currentPage={currentPage}
  totalPages={20}
  onPageChange={setCurrentPage}
  siblingCount={2}
/>

Compact Pagination

Minimal pagination for smaller spaces.

Compact variant with fewer controls

⋯

Code

<Pagination
  currentPage={currentPage}
  totalPages={50}
  onPageChange={setCurrentPage}
  variant="compact"
  showFirstLast={false}
/>

Pagination with Info

Pagination combined with item count information.

Showing 1-10 of 247 results247 total items

⋯

Code

const itemsPerPage = 10
const totalItems = 247
const totalPages = Math.ceil(totalItems / itemsPerPage)

<div className="flex justify-between items-center">
  <span>
    Showing {((currentPage - 1) * itemsPerPage) + 1}-{Math.min(currentPage * itemsPerPage, totalItems)} of {totalItems} results
  </span>
  <Badge>{totalItems} total items</Badge>
</div>

<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={setCurrentPage}
  showFirstLast={true}
/>

Props

TypeScript Support

All components are fully typed with TypeScript. Check your IDE for prop suggestions and documentation.