React Pagination - Flowbite

Get started with the pagination component to indicate the number of pages with number, link, and control buttons and allow the user to navigate through these pages

The pagination component can be used to show a list of pages with numbers and links to allow the users to navigate through multiple pages, data from tables, and more.

Choose one of the examples below based on various styles and sizes and customize them using the React props API and the utility classes from Tailwind CSS.

You need to import the pagination component from the flowbite-react library before using it:

import { Pagination } from "flowbite-react";

Default pagination#

Use the <Pagination> component to create a default pagination element and use the currentPage prop to set the currently active page, the totalPages prop to set how many pages there are in total and update the onPageChange even listener to set the state of the pagination component via React.

Edit on GitHub
"use client";

import { Pagination } from "flowbite-react";
import { useState } from "react";

function Component() {
  const [currentPage, setCurrentPage] = useState(1);

  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <div className="flex overflow-x-auto sm:justify-center">
      <Pagination currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
    </div>
  );
}

Pagination with icons#

Add next and previous icons to the pagination component by passing the showIcons prop via React.

Edit on GitHub
"use client";

import { Pagination } from "flowbite-react";
import { useState } from "react";

function Component() {
  const [currentPage, setCurrentPage] = useState(1);

  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <div className="flex overflow-x-auto sm:justify-center">
      <Pagination currentPage={currentPage} totalPages={100} onPageChange={onPageChange} showIcons />
    </div>
  );
}

Previous and next#

Show only the next and previous control buttons by passing the layout="navigation" prop from React.

Edit on GitHub
"use client";

import { Pagination } from "flowbite-react";
import { useState } from "react";

function Component() {
  const [currentPage, setCurrentPage] = useState(1);

  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <div className="flex overflow-x-auto sm:justify-center">
      <Pagination layout="navigation" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
    </div>
  );
}

Control button icons#

Show the control buttons with icons by passing both the layout="navigation" and showIcons props.

Edit on GitHub
"use client";

import { Pagination } from "flowbite-react";
import { useState } from "react";

function Component() {
  const [currentPage, setCurrentPage] = useState(1);

  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <div className="flex overflow-x-auto sm:justify-center">
      <Pagination
        layout="navigation"
        currentPage={currentPage}
        totalPages={100}
        onPageChange={onPageChange}
        showIcons
      />
    </div>
  );
}

Table data navigation#

Use this example show table data navigation by using the layout="table" prop from React.

Edit on GitHub
"use client";

import { Pagination } from "flowbite-react";
import { useState } from "react";

function Component() {
  const [currentPage, setCurrentPage] = useState(1);

  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <div className="flex overflow-x-auto sm:justify-center">
      <Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
    </div>
  );
}

Table data navigation with icons#

Show icons for the next and previous control buttons for table navigation by passing the showIcons prop.

Edit on GitHub
"use client";

import { Pagination } from "flowbite-react";
import { useState } from "react";

function Component() {
  const [currentPage, setCurrentPage] = useState(1);

  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <div className="flex overflow-x-auto sm:justify-center">
      <Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} showIcons />
    </div>
  );
}

Control button text#

Customize the text for the next and previous buttons by passing the previousLabel and nextLabel props.

Edit on GitHub
"use client";

import { Pagination } from "flowbite-react";
import { useState } from "react";

function Component() {
  const [currentPage, setCurrentPage] = useState(1);

  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <div className="flex overflow-x-auto sm:justify-center">
      <Pagination
        layout="pagination"
        currentPage={currentPage}
        totalPages={1000}
        onPageChange={onPageChange}
        previousLabel="Go back"
        nextLabel="Go forward"
        showIcons
      />
    </div>
  );
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "base": "",
  "layout": {
    "table": {
      "base": "text-sm text-gray-700 dark:text-gray-400",
      "span": "font-semibold text-gray-900 dark:text-white"
    }
  },
  "pages": {
    "base": "xs:mt-0 mt-2 inline-flex items-center -space-x-px",
    "showIcon": "inline-flex",
    "previous": {
      "base": "ml-0 rounded-l-lg border border-gray-300 bg-white px-3 py-2 leading-tight text-gray-500 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 enabled:dark:hover:bg-gray-700 enabled:dark:hover:text-white",
      "icon": "h-5 w-5"
    },
    "next": {
      "base": "rounded-r-lg border border-gray-300 bg-white px-3 py-2 leading-tight text-gray-500 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 enabled:dark:hover:bg-gray-700 enabled:dark:hover:text-white",
      "icon": "h-5 w-5"
    },
    "selector": {
      "base": "w-12 border border-gray-300 bg-white py-2 leading-tight text-gray-500 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 enabled:dark:hover:bg-gray-700 enabled:dark:hover:text-white",
      "active": "bg-cyan-50 text-cyan-600 hover:bg-cyan-100 hover:text-cyan-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white",
      "disabled": "cursor-not-allowed opacity-50"
    }
  }
}

References#