About
A market detail panel for buying and selling shares in a binary outcome (e.g. a prediction market), with odds tabs, an animated amount input, quick-amount chips and a stateful trade/connect button.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Prediction Market to your project and fits it to your theme.
Code
How Prediction Market is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import {
PredictionMarket,
type PredictionMarketOrderValue,
} from "@/components/ui/prediction-market";
import { useState } from "react";
const outcomes = [
{ id: "yes", label: "Yes", price: 0.167 },
{ id: "no", label: "No", price: 0.834 },
];
export function PredictionMarketPreview() {
const [order, setOrder] = useState<PredictionMarketOrderValue>({
mode: "buy",
outcomeId: "yes",
amount: "115",
});
return (
<div className="flex w-full items-center justify-center">
<PredictionMarket
outcomes={outcomes}
value={order}
onValueChange={setOrder}
balance={500}
positions={{ yes: 125, no: 48 }}
quickAmounts={[1, 5, 10, 100]}
/>
</div>
);
}
export default PredictionMarketPreview;
Dependencies
More by sidiora-labs
View all
Scroll To
Chat App