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.

<Pagination
  currentPage={1}
  onPageChange={onPageChange}
  totalPages={100}
/>
<Pagination
  currentPage={1}
  onPageChange={onPageChange}
  showIcons
  totalPages={100}
/>
<Pagination
  currentPage={1}
  layout="navigation"
  onPageChange={onPageChange}
  totalPages={100}
/>
<Pagination
  currentPage={1}
  layout="navigation"
  onPageChange={onPageChange}
  showIcons
  totalPages={100}
/>
<div className="flex items-center justify-center text-center">
  <Pagination
    currentPage={1}
    layout="table"
    onPageChange={onPageChange}
    totalPages={1000}
  />
</div>
<div className="flex items-center justify-center text-center">
  <Pagination
    currentPage={1}
    layout="table"
    onPageChange={onPageChange}
    showIcons
    totalPages={1000}
  />
</div>
<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>