Comparison

Features

About

Reusable comparison component for showcasing time/efficiency differences between two solutions. Features customizable cards with step-by-step breakdowns, animated reveals, and a clean side-by-side layout with VS divider—perfect for before/after, automated vs manual, or any A/B comparisons.

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

Code

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

Usage.tsx

import { ComparisonSection } from "@/components/ui/comparison";
import { Calendar } from 'lucide-react';

export default function ComparisonDemo() {
  const automatedSteps = [
    { text: "Connect social accounts (one-time)", time: "2 min", isPositive: true },
    { text: "AI generates content ideas & captions", time: "5 min", isPositive: true },
    { text: "Schedule entire month of posts", time: "10 min", isPositive: true },
    { text: "Auto-posting across all platforms", time: "0 min", isPositive: true },
    { text: "Analytics & performance tracking", time: "5 min", isPositive: true },
  ];

  const manualSteps = [
    { text: "Brainstorm content ideas", time: "2 hours", isPositive: false },
    { text: "Create posts & design graphics", time: "3 hours", isPositive: false },
    { text: "Write captions for each platform", time: "1 hour", isPositive: false },
    { text: "Manually post at optimal times", time: "2 hours", isPositive: false },
    { text: "Track engagement manually", time: "1 hour", isPositive: false },
  ];

  return (
    <ComparisonSection
      badgeIcon={Calendar}
      badgeText="Productivity Comparison"
      badgeColor="text-purple-400"
      badgeBgColor="bg-purple-500/10"
      badgeBorderColor="border-purple-500/30"
      headline="Stop"
      highlightedText="Wasting Hours on Manual Posting"
      highlightGradient="from-purple-400 via-pink-400 to-orange-400"
      subheadline="See how automated social media scheduling transforms your weekly workflow."
      leftCard={{
        title: "With AutoScheduler",
        timeBadgeText: "≈ 22 minutes/week",
        timeBadgeBgColor: "bg-emerald-500/20",
        timeBadgeTextColor: "text-emerald-400",
        steps: automatedSteps,
        totalTimeText: "22 minutes",
        totalTimeColor: "text-emerald-400"
      }}
      rightCard={{
        title: "Manual Posting",
        timeBadgeText: "≈ 9+ hours/week",
        timeBadgeBgColor: "bg-red-600/20",
        timeBadgeTextColor: "text-red-400",
        steps: manualSteps,
        totalTimeText: "9+ Hours",
        totalTimeColor: "text-red-400"
      }}
      footerText="Reclaim"
      footerHighlight="up to 96% of your social media management time."
      footerHighlightColor="text-purple-400"
      backgroundColor="dark:bg-zinc-950"
    />
  );
}