Progress

Component 6

About

Display progress relative to a limit or related to a task.

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 ThemedDemo() {
  return (
    <div className="flex flex-col gap-4 w-1/2">
        <Progress type="success" value={100} />
        <Progress type="error" value={10} />
        <Progress type="warning" value={40} />
        <Progress type="secondary" value={70} />
      </div>
  );
}