COMPONENT probability-bar
Probability Bar
Two-tone horizontal probability bar. Pure presentation — pass probabilities directly, no hook needed. Key props: yesPx (number 0-1), noPx (number 0-1), yesLabel? (string, default 'Yes'), noLabel? (string, default 'No'). Uses --success and --destructive CSS variables.
Install
$
npx shadcn@latest add https://ui.purrdict.xyz/r/probability-bar.json Preview
Binary market
Yes 72.0¢No 28.0¢
Recurring market
Up 58.0¢Down 42.0¢
Named sides
Hypurr 35.0¢Jeff 65.0¢
Usage
import { ProbabilityBar } from "@/components/hip4/probability-bar"
{/* Default Yes/No */}
<ProbabilityBar yesPx={0.72} noPx={0.28} />
{/* Recurring markets — Up/Down */}
<ProbabilityBar
yesPx={0.58}
noPx={0.42}
yesLabel="Up"
noLabel="Down"
/>Props
| Prop | Type | Description |
|---|---|---|
yesPx | number | Yes probability (0-1) |
noPx | number | No probability (0-1) |
yesLabel | string | Yes side label. Default: "Yes" |
noLabel | string | No side label. Default: "No" |