Circular Progress Card

Cards 154

About

Circular Progress Card This component displays progress towards a goal using an animated circular bar. The color of the progress bar, along with other content, can be easily customized through props, making it highly reusable.

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

Code

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

Usage.tsx

import { CircularProgressCard } from "@/components/ui/circular-progress-card";

/**
 * A demo page to showcase the CircularProgressCard component.
 * It demonstrates default usage and customization via props.
 */
const CircularProgressCardDemo = () => {
  return (
    <div className="flex min-h-[500px] w-full flex-wrap items-center justify-center gap-8 bg-background p-4">
      {/* Example: Custom color passed as a prop */}
      <CircularProgressCard
        title="Project Completion"
        description="Tasks completed for the new feature launch."
        currentValue={128}
        goalValue={200}
        currency=""
        progressColor="hsl(142.1 76.2% 41.2%)" // Custom green color
      />
    </div>
  );
};

export default CircularProgressCardDemo;