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 ProgressDemo() {
  return (
    <div className="w-full max-w-sm flex flex-col gap-6 text-foreground">
      <Progress label="Storage used" value={64} />
      <Progress label="Download" value={28} max={100} />
      <Progress label="Budget spent" value={320} max={400} />
    </div>
  );
}