Conversion Stats Card

Cards 111

About

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.

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

Code

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

Usage.tsx

import { 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>
  );
}