React Pagination - Flowbite

Use the Tailwind CSS pagination element to indicate a series of content across various pages

The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.

Default pagination

<Pagination
  currentPage={1}
  onPageChange={onPageChange}
  totalPages={100}
/>

Pagination with icons

<Pagination
  currentPage={1}
  onPageChange={onPageChange}
  showIcons
  totalPages={100}
/>

Previous and next

<Pagination
  currentPage={1}
  layout="navigation"
  onPageChange={onPageChange}
  totalPages={100}
/>

Previous and next with icons

<Pagination
  currentPage={1}
  layout="navigation"
  onPageChange={onPageChange}
  showIcons
  totalPages={100}
/>

Table data navigation

<div className="flex items-center justify-center text-center">
  <Pagination
    currentPage={1}
    layout="table"
    onPageChange={onPageChange}
    totalPages={1000}
  />
</div>

Table data navigation with icons

<div className="flex items-center justify-center text-center">
  <Pagination
    currentPage={1}
    layout="table"
    onPageChange={onPageChange}
    showIcons
    totalPages={1000}
  />
</div>

Change 'Previous' and 'Next' text

<div className="flex items-center justify-center text-center">
  <Pagination
    currentPage={1}
    layout="pagination"
    nextLabel="Go forward"
    onPageChange={onPageChange}
    previousLabel="Go back"
    showIcons
    totalPages={1000}
  />
</div>