Tailwind CSS Progress - Props

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

Attribute Type Description Default
variant Variant Change progress variant filled
color Color Change progress color blue
label string Add label for progress bar ""
value number Add the completed percentage for progress bar 0

Types - Variant 

type variant = "filled" | "gradient"

Types - Color 

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

Related

Examples

Checkout different examples for progress component.