Components
Loading preview...
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.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/circular-progress-cardimport { 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;