Tailwind CSS Progress Bar - React

Our Tailwind CSS progressbar can be used to show a user how far along he is in a process. The progress can be determinate or indeterminate. Use the Progress Bar to show an ongoing process that takes a noticeable time to finish.

Below we are presenting our examples of progress component that you can use in your Tailwind CSS and React project. It comes in different styles and colors, so you can adapt it easily to your needs.

import { Progress } from "@material-tailwind/react";
 
export default function Example() {
  return <Progress value={50} />;
}

Progress Bar Variants

The progress bar component comes with 2 different variants that you can change it using the color prop.

import { Progress } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex flex-col gap-4 w-full">
      <Progress value={50} variant="filled" />
      <Progress value={50} variant="gradient" />
    </div>
  );
}

Progress Bar Colors

The progress bar component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

import { Progress } from "@material-tailwind/react";
 
export default function Colors() {
  return (
    <div className="flex flex-col gap-4 w-full">
      <Progress value={50} color="blue" />
      <Progress value={50} color="red" />
      <Progress value={50} color="green" />
      <Progress value={50} color="amber" />
      <Progress value={50} color="teal" />
      <Progress value={50} color="indigo" />
      <Progress value={50} color="purple" />
      <Progress value={50} color="pink" />
    </div>
  );
}

Progress Bar with Label

50% Completed

import { Progress } from "@material-tailwind/react";
 
export default function Example() {
  return <Progress value={50} label="Completed" />;
}

Props

The following props are available for the progress bar component. These are the custom props that come with we've added for the progress bar component and you can use all the other native props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change progress bar variant	`filled`
`color`	Color	Change progress bar color	`blue`
`label`	label	Add label for progress bar	`undefined`
`value`	`number`	Add the completed percentage for progress bar	0
`barProps`	`Object`	Add custom props for progress bar percentage bar	`undefined`
`className`	`string`	Add custom className for progress bar	`''`

Types

type variant = "filled" | "gradient";

type color =
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

type label = string | boolean;

popover

radio button