Use our Tailwind CSS Stepper component in your web projects. The Stepper can be used for multi-step processes or forms.
See below our beautiful Stepper example 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.
Examples on this page are using @heroicons/react make sure you have installed it.
npm i @heroicons/reactimport React from "react";
import { Stepper, Step, Button } from "@material-tailwind/react";
export function DefaultStepper() {
const [activeStep, setActiveStep] = React.useState(0);
const [isLastStep, setIsLastStep] = React.useState(false);
const [isFirstStep, setIsFirstStep] = React.useState(false);
const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
return (
<div className="w-full py-4 px-8">
<Stepper
activeStep={activeStep}
isLastStep={(value) => setIsLastStep(value)}
isFirstStep={(value) => setIsFirstStep(value)}
>
<Step onClick={() => setActiveStep(0)}>1</Step>
<Step onClick={() => setActiveStep(1)}>2</Step>
<Step onClick={() => setActiveStep(2)}>3</Step>
</Stepper>
<div className="mt-16 flex justify-between">
<Button onClick={handlePrev} disabled={isFirstStep}>
Prev
</Button>
<Button onClick={handleNext} disabled={isLastStep}>
Next
</Button>
</div>
</div>
);
}You can also pass any sort of icon as children for stepper Step component.
import React from "react";
import { Stepper, Step, Button } from "@material-tailwind/react";
import { HomeIcon, CogIcon, UserIcon } from "@heroicons/react/24/outline";
export function StepperWithIcon() {
const [activeStep, setActiveStep] = React.useState(0);
const [isLastStep, setIsLastStep] = React.useState(false);
const [isFirstStep, setIsFirstStep] = React.useState(false);
const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
return (
<div className="w-full py-4 px-8">
<Stepper
activeStep={activeStep}
isLastStep={(value) => setIsLastStep(value)}
isFirstStep={(value) => setIsFirstStep(value)}
>
<Step onClick={() => setActiveStep(0)}>
<HomeIcon className="h-5 w-5" />
</Step>
<Step onClick={() => setActiveStep(1)}>
<UserIcon className="h-5 w-5" />
</Step>
<Step onClick={() => setActiveStep(2)}>
<CogIcon className="h-5 w-5" />
</Step>
</Stepper>
<div className="mt-16 flex justify-between">
<Button onClick={handlePrev} disabled={isFirstStep}>
Prev
</Button>
<Button onClick={handleNext} disabled={isLastStep}>
Next
</Button>
</div>
</div>
);
}Use the example below for a stepper with dot steps.
import React from "react";
import { Stepper, Step, Button } from "@material-tailwind/react";
export function StepperWithDots() {
const [activeStep, setActiveStep] = React.useState(0);
const [isLastStep, setIsLastStep] = React.useState(false);
const [isFirstStep, setIsFirstStep] = React.useState(false);
const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
return (
<div className="w-full py-4 px-8">
<Stepper
activeStep={activeStep}
isLastStep={(value) => setIsLastStep(value)}
isFirstStep={(value) => setIsFirstStep(value)}
>
<Step className="h-4 w-4" onClick={() => setActiveStep(0)} />
<Step className="h-4 w-4" onClick={() => setActiveStep(1)} />
<Step className="h-4 w-4" onClick={() => setActiveStep(2)} />
</Stepper>
<div className="mt-16 flex justify-between">
<Button onClick={handlePrev} disabled={isFirstStep}>
Prev
</Button>
<Button onClick={handleNext} disabled={isLastStep}>
Next
</Button>
</div>
</div>
);
}Use the example below for a stepper with some title and description for it's each step.
Details about yout account.
Details about yout account.
Details about yout account.
import React from "react";
import { Stepper, Step, Button, Typography } from "@material-tailwind/react";
import {
CogIcon,
UserIcon,
BuildingLibraryIcon,
} from "@heroicons/react/24/outline";
export function StepperWithContent() {
const [activeStep, setActiveStep] = React.useState(0);
const [isLastStep, setIsLastStep] = React.useState(false);
const [isFirstStep, setIsFirstStep] = React.useState(false);
const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
return (
<div className="w-full px-24 py-4">
<Stepper
activeStep={activeStep}
isLastStep={(value) => setIsLastStep(value)}
isFirstStep={(value) => setIsFirstStep(value)}
>
<Step onClick={() => setActiveStep(0)}>
<UserIcon className="h-5 w-5" />
<div className="absolute -bottom-[4.5rem] w-max text-center">
<Typography
variant="h6"
color={activeStep === 0 ? "blue-gray" : "gray"}
>
Step 1
</Typography>
<Typography
color={activeStep === 0 ? "blue-gray" : "gray"}
className="font-normal"
>
Details about yout account.
</Typography>
</div>
</Step>
<Step onClick={() => setActiveStep(1)}>
<CogIcon className="h-5 w-5" />
<div className="absolute -bottom-[4.5rem] w-max text-center">
<Typography
variant="h6"
color={activeStep === 1 ? "blue-gray" : "gray"}
>
Step 2
</Typography>
<Typography
color={activeStep === 1 ? "blue-gray" : "gray"}
className="font-normal"
>
Details about yout account.
</Typography>
</div>
</Step>
<Step onClick={() => setActiveStep(2)}>
<BuildingLibraryIcon className="h-5 w-5" />
<div className="absolute -bottom-[4.5rem] w-max text-center">
<Typography
variant="h6"
color={activeStep === 2 ? "blue-gray" : "gray"}
>
Step 3
</Typography>
<Typography
color={activeStep === 2 ? "blue-gray" : "gray"}
className="font-normal"
>
Details about yout account.
</Typography>
</div>
</Step>
</Stepper>
<div className="mt-32 flex justify-between">
<Button onClick={handlePrev} disabled={isFirstStep}>
Prev
</Button>
<Button onClick={handleNext} disabled={isLastStep}>
Next
</Button>
</div>
</div>
);
}You can use the className, lineClassName and activeLineClassName prop to add custom styles to the Stepper component and use the className, activeClassName and completedClassName prop to add custom styles to the Step component.
import React from "react";
import { Stepper, Step, CardHeader, Typography } from "@material-tailwind/react";
export function CustomStepper() {
const [activeStep, setActiveStep] = React.useState(0);
return (
<div className="w-full py-4 px-8">
<CardHeader floated={false} variant="gradient" color="gray" className="grid h-24 m-0 place-items-center">
<div className="w-full px-20 pt-4 pb-8">
<Stepper
activeStep={activeStep}
lineClassName="bg-white/50"
activeLineClassName="bg-white"
>
<Step
className="h-4 w-4 !bg-blue-gray-50 text-white/75 cursor-pointer"
activeClassName="ring-0 !bg-white text-white"
completedClassName="!bg-white text-white"
onClick={() => setActiveStep(0)}
>
<div className="absolute -bottom-[2.3rem] w-max text-center text-xs">
<Typography variant="h6" color="inherit">HTML</Typography>
</div>
</Step>
<Step
className="h-4 w-4 !bg-blue-gray-50 text-white/75 cursor-pointer"
activeClassName="ring-0 !bg-white text-white"
completedClassName="!bg-white text-white"
onClick={() => setActiveStep(1)}
>
<div className="absolute -bottom-[2.3rem] w-max text-center text-xs">
<Typography variant="h6" color="inherit">React</Typography>
</div>
</Step>
<Step
className="h-4 w-4 !bg-blue-gray-50 text-white/75 cursor-pointer"
activeClassName="ring-0 !bg-white text-white"
completedClassName="!bg-white text-white"
onClick={() => setActiveStep(2)}
>
<div className="absolute -bottom-[2.3rem] w-max text-center text-xs">
<Typography variant="h6" color="inherit">Vue</Typography>
</div>
</Step>
<Step
className="h-4 w-4 !bg-blue-gray-50 text-white/75 cursor-pointer"
activeClassName="ring-0 !bg-white text-white"
completedClassName="!bg-white text-white"
onClick={() => setActiveStep(3)}
>
<div className="absolute -bottom-[2.3rem] w-max text-center text-xs">
<Typography variant="h6" color="inherit">Svelte</Typography>
</div>
</Step>
</Stepper>
</div>
</CardHeader>
</div>
);
}Looking for more stepper examples? Check out our Onboarding Sections from Material Tailwind Blocks.