Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Installation
Install the following dependencies:
pnpm add @radix-ui/react-progress
Copy and paste the following code into your project.
import * as ProgressPrimitive from "@radix-ui/react-progress";
import { cn } from "~/utils/tailwind";
function Progress({
className,
value,
...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
return (
<ProgressPrimitive.Root
className={cn(
"relative h-2 w-full overflow-hidden rounded-full bg-secondary",
className,
)}
{...props}
>
<ProgressPrimitive.Indicator
className="size-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
/>
</ProgressPrimitive.Root>
);
}
export { Progress };
Update the import paths to match your project setup.
Usage
import { Progress } from "~/components/ui/Progress";
<Progress value={33} />