I Am Trying to Customize Progress Bar Color. So What is the good Way to Do that

[clevermiraz]

https://ui.shadcn.com/docs/components/progress

This is the progress bar.

[DominicF96]

I added the fill prop to the Progress component.

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
    fill?: "primary" | "secondary" | "accent" | "warning" | "destructive";
  }
>(({ className, value, fill = "primary", ...props }, ref) => (
  // ...
    <ProgressPrimitive.Indicator
      className={`h-full w-full flex-1 bg-${fill} transition-all`}
      />
// ...

There's probably a better way to type the fill prop, not sure how for now, fairly new with shadcn/tailwind, but it works.

<Progress fill="destructive"/>