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:

'use client';

import { Pagination } from 'flowbite-react';

Table of Contents#

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
  • React TypeScript
'use client';

import { Pagination } from 'flowbite-react';

export default function DefaultPagination() {
  const [currentPage, setCurrentPage] = useState(1);
  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <Pagination
      currentPage={1}
      onPageChange={page=>{setCurrentPage(page)}}
      totalPages={100}
    />
  )
}

Pagination with icons#

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

Edit on GitHub
  • React TypeScript
'use client';

import { Pagination } from 'flowbite-react';

export default function PaginationWithIcons() {
  const [currentPage, setCurrentPage] = useState(1);
  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <Pagination
      currentPage={1}
      onPageChange={page=>{setCurrentPage(page)}}
      showIcons
      totalPages={100}
    />
  )
}

Previous and next#

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

Edit on GitHub
  • React TypeScript
'use client';

import { Pagination } from 'flowbite-react';

export default function PreviousAndNext() {
  const [currentPage, setCurrentPage] = useState(1);
  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <Pagination
      currentPage={1}
      layout="navigation"
      onPageChange={page=>{setCurrentPage(page)}}
      totalPages={100}
    />
  )
}

Control button icons#

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

Edit on GitHub
  • React TypeScript
'use client';

import { Pagination } from 'flowbite-react';

export default function PreviousAndNextWithIcons() {
  const [currentPage, setCurrentPage] = useState(1);
  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <Pagination
      currentPage={1}
      layout="navigation"
      onPageChange={page=>{setCurrentPage(page)}}
      showIcons
      totalPages={100}
    />
  )
}

Table data navigation#

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

Edit on GitHub
  • React TypeScript
'use client';

import { Pagination } from 'flowbite-react';

export default function TableDataNavigation() {
  const [currentPage, setCurrentPage] = useState(1);
  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <div className="flex items-center justify-center text-center">
      <Pagination
        currentPage={1}
        layout="table"
        onPageChange={page=>{setCurrentPage(page)}}
        totalPages={1000}
      />
    </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
  • React TypeScript
'use client';

import { Pagination } from 'flowbite-react';

export default function TableDataNavigationWithIcons() {
  const [currentPage, setCurrentPage] = useState(1);
  const onPageChange = (page: number) => setCurrentPage(page);

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

Control button text#

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

Edit on GitHub
  • React TypeScript
'use client';

import { Pagination } from 'flowbite-react';

export default function ControlButtonText() {
  const [currentPage, setCurrentPage] = useState(1);
  const onPageChange = (page: number) => setCurrentPage(page);

  return (
    <div className="flex items-center justify-center text-center">
      <Pagination
        currentPage={1}
        layout="pagination"
        nextLabel="Go forward"
        onPageChange={page=>{setCurrentPage(page)}}
        previousLabel="Go back"
        showIcons
        totalPages={1000}
      />
    </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 py-2 px-3 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 py-2 px-3 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": "opacity-50 cursor-normal"
    }
  }
}

References#