Components
Loading preview...
Here is Progress component
npx shadcn@latest add https://21st.dev/r/coss.com/progress"use client";
import {
Progress,
ProgressIndicator,
ProgressLabel,
ProgressTrack,
ProgressValue,
} from "@/components/ui/component";
export default function ProgressWithFormattedValue() {
return (
<Progress max={512} value={502}>
<div className="flex items-center justify-between gap-2">
<ProgressLabel>Upload</ProgressLabel>
<ProgressValue>{(_formatted: string, value: number | null) => `${value} / 512`}</ProgressValue>
</div>
<ProgressTrack>
<ProgressIndicator />
</ProgressTrack>
</Progress>
);
}