Tailwind CSS Pagination - React

Our React and Tailwind CSS pagination that can be used to show a user how to navigate between different pages of table or a group of elements.

Below we are presenting our examples of pagination component build using Button, IconButton and ButtonGroup components that you can use in your Tailwind CSS and React project.

Pagination Demo

Here's how to implement a simple and responsive pagination using Button and IconButton components. It can be used for the action of navigating between pages in a table or a group of elements.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import { Button, IconButton } from "@material-tailwind/react";
import { NavArrowRight, NavArrowLeft } from "iconoir-react";

export function PaginationDemo() {
  return (
    <div className="flex items-center gap-1">
      <Button variant="ghost">
        <NavArrowLeft className="mr-1.5 h-4 w-4 stroke-2" />
        Previous
      </Button>
      <IconButton variant="ghost">1</IconButton>
      <IconButton>2</IconButton>
      <IconButton variant="ghost">3</IconButton>
      <IconButton variant="ghost">4</IconButton>
      <IconButton variant="ghost">5</IconButton>
      <Button variant="ghost">
        Next
        <NavArrowRight className="ml-1.5 h-4 w-4 stroke-2" />
      </Button>
    </div>
  );
}
"use client";

import { Button, IconButton } from "@material-tailwind/react";
import { NavArrowRight, NavArrowLeft } from "iconoir-react";

export function PaginationDemo() {
  return (
    <div className="flex items-center gap-1">
      <Button variant="ghost">
        <NavArrowLeft className="mr-1.5 h-4 w-4 stroke-2" />
        Previous
      </Button>
      <IconButton variant="ghost">1</IconButton>
      <IconButton>2</IconButton>
      <IconButton variant="ghost">3</IconButton>
      <IconButton variant="ghost">4</IconButton>
      <IconButton variant="ghost">5</IconButton>
      <Button variant="ghost">
        Next
        <NavArrowRight className="ml-1.5 h-4 w-4 stroke-2" />
      </Button>
    </div>
  );
}

Pagination Circular

Use this example for a circular pagination using Button and IconButton components.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import { Button, IconButton } from "@material-tailwind/react";
import { NavArrowRight, NavArrowLeft } from "iconoir-react";

export function PaginationCircular() {
  return (
    <div className="flex items-center gap-1">
      <Button isPill variant="ghost">
        <NavArrowLeft className="mr-1.5 h-4 w-4 stroke-2" />
        Previous
      </Button>
      <IconButton isCircular variant="ghost">
        1
      </IconButton>
      <IconButton isCircular>2</IconButton>
      <IconButton isCircular variant="ghost">
        3
      </IconButton>
      <IconButton isCircular variant="ghost">
        4
      </IconButton>
      <IconButton isCircular variant="ghost">
        5
      </IconButton>
      <Button isPill variant="ghost">
        Next
        <NavArrowRight className="ml-1.5 h-4 w-4 stroke-2" />
      </Button>
    </div>
  );
}
"use client";

import { Button, IconButton } from "@material-tailwind/react";
import { NavArrowRight, NavArrowLeft } from "iconoir-react";

export function PaginationCircular() {
  return (
    <div className="flex items-center gap-1">
      <Button isPill variant="ghost">
        <NavArrowLeft className="mr-1.5 h-4 w-4 stroke-2" />
        Previous
      </Button>
      <IconButton isCircular variant="ghost">
        1
      </IconButton>
      <IconButton isCircular>2</IconButton>
      <IconButton isCircular variant="ghost">
        3
      </IconButton>
      <IconButton isCircular variant="ghost">
        4
      </IconButton>
      <IconButton isCircular variant="ghost">
        5
      </IconButton>
      <Button isPill variant="ghost">
        Next
        <NavArrowRight className="ml-1.5 h-4 w-4 stroke-2" />
      </Button>
    </div>
  );
}

Simple Pagination

Use this example for a simple pagination using IconButton and Typography components. It can be used when there is more pages to navigate.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Page2of10

"use client";

import { IconButton, Typography } from "@material-tailwind/react";
import { NavArrowRight, NavArrowLeft } from "iconoir-react";

export function SimplePagination() {
  return (
    <div className="flex items-center gap-2">
      <IconButton size="sm" color="secondary" variant="ghost">
        <NavArrowLeft className="h-4 w-4 stroke-2" />
      </IconButton>
      <Typography className="flex items-center gap-1 text-foreground">
        Page
        <Typography as="span" color="default" className="font-semibold">
          2
        </Typography>
        of
        <Typography as="span" color="default" className="font-semibold">
          10
        </Typography>
      </Typography>
      <IconButton size="sm" color="secondary" variant="ghost">
        <NavArrowRight className="h-4 w-4 stroke-2" />
      </IconButton>
    </div>
  );
}
"use client";

import { IconButton, Typography } from "@material-tailwind/react";
import { NavArrowRight, NavArrowLeft } from "iconoir-react";

export function SimplePagination() {
  return (
    <div className="flex items-center gap-2">
      <IconButton size="sm" color="secondary" variant="ghost">
        <NavArrowLeft className="h-4 w-4 stroke-2" />
      </IconButton>
      <Typography className="flex items-center gap-1 text-foreground">
        Page
        <Typography as="span" color="default" className="font-semibold">
          2
        </Typography>
        of
        <Typography as="span" color="default" className="font-semibold">
          10
        </Typography>
      </Typography>
      <IconButton size="sm" color="secondary" variant="ghost">
        <NavArrowRight className="h-4 w-4 stroke-2" />
      </IconButton>
    </div>
  );
}

Pagination Group

Use this example for a pagination group using IconButton and ButtonGroup components. It's useful when you want to group all the pages and actions together.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import { IconButton, ButtonGroup } from "@material-tailwind/react";
import { NavArrowRight, NavArrowLeft } from "iconoir-react";

export function PaginationGroup() {
  return (
    <ButtonGroup>
      <IconButton variant="outline">
        <NavArrowLeft className="h-4 w-4 stroke-2" />
      </IconButton>
      <IconButton variant="outline">1</IconButton>
      <IconButton>2</IconButton>
      <IconButton variant="outline">3</IconButton>
      <IconButton variant="outline">4</IconButton>
      <IconButton variant="outline">5</IconButton>
      <IconButton variant="outline">
        <NavArrowRight className="h-4 w-4 stroke-2" />
      </IconButton>
    </ButtonGroup>
  );
}
"use client";

import { IconButton, ButtonGroup } from "@material-tailwind/react";
import { NavArrowRight, NavArrowLeft } from "iconoir-react";

export function PaginationGroup() {
  return (
    <ButtonGroup>
      <IconButton variant="outline">
        <NavArrowLeft className="h-4 w-4 stroke-2" />
      </IconButton>
      <IconButton variant="outline">1</IconButton>
      <IconButton>2</IconButton>
      <IconButton variant="outline">3</IconButton>
      <IconButton variant="outline">4</IconButton>
      <IconButton variant="outline">5</IconButton>
      <IconButton variant="outline">
        <NavArrowRight className="h-4 w-4 stroke-2" />
      </IconButton>
    </ButtonGroup>
  );
}