Pagination

Ready

Navigate through lists and tables with numbered pagination and simple prev/next controls.

Full Pagination

Complete pagination with page numbers, ellipsis for overflow, and result count.

Simple Pagination

Minimal prev/next navigation for simpler use cases.

Features

Key capabilities of the pagination component

Smart Ellipsis

Automatically collapses page numbers with ellipsis for long lists.

Result Count

Display current range and total results for context.

Disabled States

Prev/next buttons disable at boundaries with visual feedback.

Usage

When to use pagination

Use pagination for:

  • •Long lists and tables with many items
  • •Search results pages
  • •Blog post archives and article listings
  • •E-commerce product listings
  • •Use simple variant for sequential content like multi-step forms

Code Example

How to implement pagination

import { useState } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'

function Pagination({ totalPages, currentPage, onPageChange }) {
  return (
    <nav className="flex items-center gap-1">
      <button
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage === 1}
        className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-40"
      >
        <ChevronLeft className="w-5 h-5" />
      </button>

      {/* Page numbers */}
      {[1, 2, 3, '...', totalPages].map((page, i) => (
        <button
          key={i}
          onClick={() => typeof page === 'number' && onPageChange(page)}
          className={
            page === currentPage
              ? 'bg-indigo-50 text-indigo-600'
              : 'hover:bg-slate-100'
          }
        >
          {page}
        </button>
      ))}

      <button
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
        className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-40"
      >
        <ChevronRight className="w-5 h-5" />
      </button>
    </nav>
  )
}

API Reference

Props

currentPage-number - Current active page
totalPages-number - Total number of pages
onPageChange-(page: number) => void - Callback when page changes
showResults-boolean - Show results count (default: true)
variant-"full" | "simple" - Pagination style (default: "full")

Features

  • Smart ellipsis for large page counts
  • Results count display
  • Keyboard navigation support
  • Disabled states at boundaries
  • Full and simple variants
  • Accessible and WCAG compliant