Odds Display

Component 5

About

A selectable sports-betting price shown in decimal, fractional or American format, with an arrow flagging when the price has drifted or shortened since it was last shown.

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

Code

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

Usage.tsx

"use client";

import { OddsDisplay } from "@/components/ui/odds-display";

export default function OddsDisplayDemo() {
  return (
    <div className="flex items-center justify-center gap-2 bg-background p-10">
      <OddsDisplay
        label="Arsenal"
        odds={2.4}
        previousOdds={2.1}
        format="decimal"
        onSelect={() => {}}
      />
      <OddsDisplay
        label="Draw"
        odds={3.6}
        format="decimal"
        onSelect={() => {}}
      />
    </div>
  );
}