Components
Loading preview...
ConversionStatsCard This card component is designed to display a title, a composite progress bar, and a list of key statistics. It's built to be highly reusable by accepting its data through props.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/conversion-stats-cardimport { ConversionStatsCard } from "@/components/ui/conversion-stats-card";
// Demo data simulating the provided image
const conversionData = [
{
label: "Visitor",
value: 12565,
percentage: 75.3,
change: 2424,
changeType: "increase" as const, // Use 'as const' for type safety
color: "bg-emerald-500",
},
{
label: "Product sales",
value: 1421,
percentage: 24.7,
change: 213,
changeType: "decrease" as const,
color: "bg-amber-400",
},
];
export default function ConversionStatsCardDemo() {
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<ConversionStatsCard
title="Conversion Rates"
data={conversionData}
onActionClick={() => alert("Action button clicked!")}
className="shadow-lg"
/>
</div>
);
}