Price Compare

Pricing

About

A price comparison list that sorts seller offers and highlights the cheapest one with a best-offer badge.

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

Code

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

Usage.tsx

import { PriceCompare } from "@/components/ui/price-compare";

export default function PriceCompareDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8 text-foreground">
      <PriceCompare
        title="Wireless Noise-Cancelling Headphones"
        currency="$"
        offers={[
          {
            id: "1",
            seller: "AudioHub",
            price: 279.99,
            shipping: "Free shipping · 2-3 days",
          },
          {
            id: "2",
            seller: "SoundBox Store",
            price: 259.0,
            shipping: "Free shipping · 4-6 days",
          },
          {
            id: "3",
            seller: "GadgetNest",
            price: 299.5,
            shipping: "$4.99 shipping · 1-2 days",
          },
          {
            id: "4",
            seller: "TechMarket",
            price: 265.75,
            shipping: "Free shipping · 3-5 days",
          },
        ]}
      />
    </div>
  );
}