Tailwind CSS Progress Bar - Props

The following props are available for 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.

AttributeTypeDescriptionDefault
variantVariantChange progress bar variantfilled
colorColorChange progress bar colorblue
labellabelAdd label for progress barundefined
valuenumberAdd the completed percentage for progress bar0
barPropsobjectAdd custom props for progress bar percentage barundefined
classNamestringAdd custom className for progress bar''


For TypeScript Only

import type { ProgressProps } from "@material-tailwind/react";

Types - Variant

type variant = "filled" | "gradient";

Types - Color

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

Types - Label

type label = string | boolean;
Edit this page on Github