Tailwind CSS Progress Bar - Theme

Learn how to customize the theme and styles for progress bar component, the theme object for progress bar component has three main objects:

A. The defaultProps object for setting up the default value for props of progress bar component.
B. The valid object for customizing the valid values for progress bar component props.
C. The styles object for customizing the theme and styles of progress bar component.

You can customize the theme and styles of progress bar component by adding Tailwind CSS classes as key paired values for objects.

Progress Bar Theme Object Type

interface ProgressStylesType {
  defaultProps: {
    variant: string;
    color: string;
    value: number;
    label: string | boolean;
    barProps: object;
    className: string;
  };
  valid: {
    variants: string[];
    colors: string[];
  };
  styles: {
    base: {
      container: {
        initial: object;
        withLabel: object;
      };
      bar: object;
    };
    variants: {
      filled: object;
      gradient: object;
    };
  };
}

For TypeScript Only

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

Progress Bar Theme Customization

const theme = {
  progress: {
    styles: {
      base: {
        bar: {
          display: "flex",
          justifyContent: "justify-center",
          alignItems: "items-center",
        },
      },
    },
  },
};

Examples

Checkout different examples for progress bar component.

Props

Learn more about props definition and types of progress bar component.