How to change Progress bar color?

[Hisui02]

Hello, I am trying to build two mirrored progress bars, showing two teams current gold, I would like to change every bar to the team's color but as far as I know there is no prop that I can use to do that, I have opened the component file and the bar background has a bg-primary written and does not seem to be configurable. If anyone can tell me how to change it or even how to customize the component to add it I would be very grateful. Thanks

Note: Currently I have cloned and exported the component inside the file, changing the name to ProgressBlue and ProgressRed and updating the Tailwind background class, is there a way to do it dinamically?

[NikharPandya]

@Hisui02 have you tried using accent property from tailwindcss ? https://tailwindcss.com/docs/accent-color
you could add it to the progress root component https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/progress.tsx

[Hisui02]

Tailwind CSS accent property does not work and adding it to the component was what I was trying but honestly I got lost with the typescript and couldn't add the prop properly

[itaim18]

I would do something like

"use client";

import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";

import { cn } from "@/lib/utils";

interface CustomProgressProps
  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
  indicatorColor: string;
}
const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  CustomProgressProps
>(({ className, value, indicatorColor, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className={`h-full w-full flex-1  transition-all ${indicatorColor}`}
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
));
Progress.displayName = ProgressPrimitive.Root.displayName;

export { Progress };

and would treat this in my code as such:

<Progress
            value={50}
            className="w-[60%]"
            indicatorColor="bg-blue-300" />

If the root's component isn't changing as much I would suggest indicating the styles to the indicator and maintain a static style to the root
Hope this helps :)

[Hisui02]

Thank you so much, I was having so much problem with the TS

[AdityaSetyadi]

I've tested it thoroughly, and everything is working perfectly. However, I modified the interface declaration by replacing it with type.

"use client";

import * as React from "react";
import * as ProgressPrimitive from "@radix-ui/react-progress";

import { cn } from "@/lib/utils";

type CustomProgressProps = React.ComponentPropsWithoutRef<
  typeof ProgressPrimitive.Root
> & {
  indicatorColor: string;
};

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  CustomProgressProps
>(({ className, value, indicatorColor, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className={`h-full w-full flex-1 transition-all ${indicatorColor}`}
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
));
Progress.displayName = ProgressPrimitive.Root.displayName;

export { Progress };

[hkaya15]

I think "indicatorColor" doesn't work anymore. It use primary color from global.css. Is there any suggestion?

[hkaya15]

<ProgressPrimitive.Root ref={ref} className={cn( 'relative h-2 w-full overflow-hidden rounded-full bg-secondary', className )} {...props}> <ProgressPrimitive.Indicator className='h-full w-full flex-1 bg-indigo-500 transition-all' style={{ transform: translateX(-${100 - (value || 0)}%) }} /> </ProgressPrimitive.Root>

[hkaya15]

I use like that and send props for bg-primary for now

[roninCode]

If you're just trying to change the color of the indicator using tailwind, you could use tailwind to target the child of Progress (the indicator).

Per option #2
you can use [&>*]: to target the children of a component.

In this case you could do something like:

  <Progress  className='[&>*]:bg-red-600' value={50} max={100} />

and it would change the indicator to red.

More of a quick and dirty way to do it if you don't want to create a whole new wrapper component

[thallysondias]

Clean solution!