Tailwind CSS Stepper - React

Use our React and Tailwind CSS stepper in your web projects. The stepper can be used for multi-step processes or forms. You can easily create stepper using our Timeline component with the mode prop set to stepper.

See below our beautiful stepper component examples that you can use in your Tailwind CSS and React project. The example also comes in different styles so you can adapt it easily to your needs.

Stepper Demo

Here's how to implement a simple and responsive stepper component. It can be used for multi-step forms.

1
2
3
import * as React from "react";
import { Timeline, Button } from "@material-tailwind/react";

export function StepperDemo() {
  const [step, setStep] = React.useState(0);

  return (
    <div className="w-full">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item disabled={step < 0} value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>1</Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 1} value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>2</Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 2} value={2}>
          <Timeline.Header>
            <Timeline.Icon>3</Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
      </Timeline>

      <div className="flex justify-between w-full gap-4 mt-14">
        <Button disabled={step === 0} onClick={() => setStep(step - 1)}>
          Previous
        </Button>
        <Button
          variant="solid"
          disabled={step === 2}
          onClick={() => setStep(step + 1)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}
import * as React from "react";
import { Timeline, Button } from "@material-tailwind/react";

export function StepperDemo() {
  const [step, setStep] = React.useState(0);

  return (
    <div className="w-full">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item disabled={step < 0} value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>1</Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 1} value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>2</Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 2} value={2}>
          <Timeline.Header>
            <Timeline.Icon>3</Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
      </Timeline>

      <div className="flex justify-between w-full gap-4 mt-14">
        <Button disabled={step === 0} onClick={() => setStep(step - 1)}>
          Previous
        </Button>
        <Button
          variant="solid"
          disabled={step === 2}
          onClick={() => setStep(step + 1)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}

Stepper with Icon

You can use icons in your stepper by adding icon to the Timeline.Icon component to make it more visually appealing. Use the example below to create a stepper with icons.

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

import * as React from "react";
import { Timeline, Button } from "@material-tailwind/react";
import { HomeSimple, UserCircle, Settings } from "iconoir-react";

export function StepperWithIcon() {
  const [step, setStep] = React.useState(0);

  return (
    <div className="w-full">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item disabled={step < 0} value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>
              <HomeSimple className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 1} value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>
              <UserCircle className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 2} value={2}>
          <Timeline.Header>
            <Timeline.Icon>
              <Settings className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
      </Timeline>

      <div className="flex justify-between w-full gap-4 mt-14">
        <Button disabled={step === 0} onClick={() => setStep(step - 1)}>
          Previous
        </Button>
        <Button
          variant="solid"
          disabled={step === 2}
          onClick={() => setStep(step + 1)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}
import * as React from "react";
import { Timeline, Button } from "@material-tailwind/react";
import { HomeSimple, UserCircle, Settings } from "iconoir-react";

export function StepperWithIcon() {
  const [step, setStep] = React.useState(0);

  return (
    <div className="w-full">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item disabled={step < 0} value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>
              <HomeSimple className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 1} value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>
              <UserCircle className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 2} value={2}>
          <Timeline.Header>
            <Timeline.Icon>
              <Settings className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
        </Timeline.Item>
      </Timeline>

      <div className="flex justify-between w-full gap-4 mt-14">
        <Button disabled={step === 0} onClick={() => setStep(step - 1)}>
          Previous
        </Button>
        <Button
          variant="solid"
          disabled={step === 2}
          onClick={() => setStep(step + 1)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}

Stepper with Dots

You can use dots in your stepper by not adding any content to the Timeline.Icon component, this will create a stepper with dots instead of numbers or icons.

import * as React from "react";
import { Timeline, Button } from "@material-tailwind/react";

export function StepperWithDots() {
  const [step, setStep] = React.useState(0);

  return (
    <div className="w-full">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item disabled={step < 0} value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon className="w-4 h-4" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 1} value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon className="w-4 h-4" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 2} value={2}>
          <Timeline.Header>
            <Timeline.Icon className="w-4 h-4" />
          </Timeline.Header>
        </Timeline.Item>
      </Timeline>

      <div className="flex justify-between w-full gap-4 mt-14">
        <Button disabled={step === 0} onClick={() => setStep(step - 1)}>
          Previous
        </Button>
        <Button
          variant="solid"
          disabled={step === 2}
          onClick={() => setStep(step + 1)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}
import * as React from "react";
import { Timeline, Button } from "@material-tailwind/react";

export function StepperWithDots() {
  const [step, setStep] = React.useState(0);

  return (
    <div className="w-full">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item disabled={step < 0} value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon className="w-4 h-4" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 1} value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon className="w-4 h-4" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item disabled={step < 2} value={2}>
          <Timeline.Header>
            <Timeline.Icon className="w-4 h-4" />
          </Timeline.Header>
        </Timeline.Item>
      </Timeline>

      <div className="flex justify-between w-full gap-4 mt-14">
        <Button disabled={step === 0} onClick={() => setStep(step - 1)}>
          Previous
        </Button>
        <Button
          variant="solid"
          disabled={step === 2}
          onClick={() => setStep(step + 1)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}

Stepper With Content

You can add extra content for each step of the stepper. Use the example below to create a stepper with specific content for its steps.

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

Step 1
Details about yout account.
Step 2
Details about yout account.
Step 3
Details about yout account.
import * as React from "react";
import { Timeline, Button, Typography } from "@material-tailwind/react";
import { HomeSimple, UserCircle, Settings } from "iconoir-react";

export function StepperWithContent() {
  const [step, setStep] = React.useState(0);

  return (
    <div className="w-full">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item disabled={step < 0} value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>
              <HomeSimple className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
          <div className="mt-4">
            <Typography type="h6">Step 1</Typography>
            <Typography type="small">Details about yout account.</Typography>
          </div>
        </Timeline.Item>
        <Timeline.Item disabled={step < 1} value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>
              <UserCircle className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
          <div className="pl-2 mt-4">
            <Typography type="h6">Step 2</Typography>
            <Typography type="small">Details about yout account.</Typography>
          </div>
        </Timeline.Item>
        <Timeline.Item disabled={step < 2} value={2} className="w-full">
          <Timeline.Header>
            <Timeline.Icon>
              <Settings className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
          <div className="pl-2 mt-4">
            <Typography type="h6">Step 3</Typography>
            <Typography type="small">Details about yout account.</Typography>
          </div>
        </Timeline.Item>
      </Timeline>

      <div className="flex justify-between w-full gap-4 mt-14">
        <Button disabled={step === 0} onClick={() => setStep(step - 1)}>
          Previous
        </Button>
        <Button
          variant="solid"
          disabled={step === 2}
          onClick={() => setStep(step + 1)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}
import * as React from "react";
import { Timeline, Button, Typography } from "@material-tailwind/react";
import { HomeSimple, UserCircle, Settings } from "iconoir-react";

export function StepperWithContent() {
  const [step, setStep] = React.useState(0);

  return (
    <div className="w-full">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item disabled={step < 0} value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>
              <HomeSimple className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
          <div className="mt-4">
            <Typography type="h6">Step 1</Typography>
            <Typography type="small">Details about yout account.</Typography>
          </div>
        </Timeline.Item>
        <Timeline.Item disabled={step < 1} value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator />
            <Timeline.Icon>
              <UserCircle className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
          <div className="pl-2 mt-4">
            <Typography type="h6">Step 2</Typography>
            <Typography type="small">Details about yout account.</Typography>
          </div>
        </Timeline.Item>
        <Timeline.Item disabled={step < 2} value={2} className="w-full">
          <Timeline.Header>
            <Timeline.Icon>
              <Settings className="w-6 h-6" />
            </Timeline.Icon>
          </Timeline.Header>
          <div className="pl-2 mt-4">
            <Typography type="h6">Step 3</Typography>
            <Typography type="small">Details about yout account.</Typography>
          </div>
        </Timeline.Item>
      </Timeline>

      <div className="flex justify-between w-full gap-4 mt-14">
        <Button disabled={step === 0} onClick={() => setStep(step - 1)}>
          Previous
        </Button>
        <Button
          variant="solid"
          disabled={step === 2}
          onClick={() => setStep(step + 1)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}

Stepper Custom Styles

You can use the className prop to customize the Timeline component style and make your own custom stepper. In the example below, we've showcased a custom stepper with a purple background color and rounded corners.

import * as React from "react";
import { Timeline, Card } from "@material-tailwind/react";

export function StepperCustomStyles() {
  const [step, setStep] = React.useState(0);

  return (
    <Card color="primary" className="mx-auto w-full rounded-full p-6">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator className="bg-gray-300 group-data-[completed=true]:bg-white" />
            <Timeline.Icon className="h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator className="bg-gray-300 group-data-[completed=true]:bg-white" />
            <Timeline.Icon className="h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item value={2} className="w-full">
          <Timeline.Header>
            <Timeline.Separator className="bg-gray-300 group-data-[completed=true]:bg-white" />
            <Timeline.Icon className="h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item value={3}>
          <Timeline.Header>
            <Timeline.Icon className="h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white" />
          </Timeline.Header>
        </Timeline.Item>
      </Timeline>
    </Card>
  );
}
import * as React from "react";
import { Timeline, Card } from "@material-tailwind/react";

export function StepperCustomStyles() {
  const [step, setStep] = React.useState(0);

  return (
    <Card color="primary" className="mx-auto w-full rounded-full p-6">
      <Timeline
        mode="stepper"
        value={step}
        onChange={(val) => setStep(Number(val))}
      >
        <Timeline.Item value={0} className="w-full">
          <Timeline.Header>
            <Timeline.Separator className="bg-gray-300 group-data-[completed=true]:bg-white" />
            <Timeline.Icon className="h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item value={1} className="w-full">
          <Timeline.Header>
            <Timeline.Separator className="bg-gray-300 group-data-[completed=true]:bg-white" />
            <Timeline.Icon className="h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item value={2} className="w-full">
          <Timeline.Header>
            <Timeline.Separator className="bg-gray-300 group-data-[completed=true]:bg-white" />
            <Timeline.Icon className="h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white" />
          </Timeline.Header>
        </Timeline.Item>
        <Timeline.Item value={3}>
          <Timeline.Header>
            <Timeline.Icon className="h-4 w-4 bg-gray-300 group-data-[active=true]:bg-white group-data-[completed=true]:bg-white" />
          </Timeline.Header>
        </Timeline.Item>
      </Timeline>
    </Card>
  );
}