Progress

Component

About

A labeled progress bar that shows a percentage fill with an optional label and value readout, for tracking task or upload completion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Progress to your project and fits it to your theme.

Code

How Progress is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Progress from "@/components/ui/progress";

export default function ProgressBareDemo() {
  return (
    <div className="w-full max-w-sm flex flex-col gap-4 text-foreground">
      <Progress
        label="Upload progress"
        value={72}
        showLabel={false}
        showValue={false}
      />
      <Progress
        label="Sync progress"
        value={45}
        showLabel={false}
        showValue={false}
      />
    </div>
  );
}