Embeddable prediction market UI components built with React and Tailwind CSS. Drop a full trading interface into any React app with a few imports.
Built on @pmxt/sdk for data fetching and order management.
npm install @pmxt/componentsRequired:
react>= 18react-dom>= 18lightweight-charts^5
Optional (only needed if you use wallet or framework-specific components):
wagmi^2@rainbow-me/rainbowkit^2next>= 14canvas-confetti^1
Add the @source directive to your CSS entry file so Tailwind can detect the
classes used by these components:
@import"tailwindcss";
@source"node_modules/@pmxt/components/dist";All components are themed through CSS custom properties. Define them on :root
(or any ancestor element) to match your brand:
:root {
/* Brand */--brand-primary:#00a36c;
--brand-primary-hover:#008f5d;
/* Backgrounds */--bg-main:#ffffff;
--bg-surface:#ffffff;
--bg-surface-hover:#f3f4f6;
--bg-header:#ffffff;
--bg-input:#f4f4f5;
/* Text */--text-primary:#111827;
--text-secondary:#6b7280;
--text-muted:#9ca3af;
--text-inverse:#ffffff;
/* Borders */--border-subtle:rgba(0,0,0,0.06);
--border-strong:rgba(0,0,0,0.12);
/* Status */--color-live:#ef4444;
--color-yes:#00a36c;
--color-no:#ef4444;
/* Shape */--radius-full:9999px;
--radius-card:16px;
--radius-btn:9999px;
--shadow-sm: none;
--shadow-card: none;
/* Typography */--font-primary:"Plus Jakarta Sans", sans-serif;
--font-secondary:"Plus Jakarta Sans", sans-serif;
}Override any variable and every component picks up the changes automatically.
import{EventCard}from"@pmxt/components";functionApp(){return(<EventCardtitle="Will BTC exceed $100k by July 2026?"imageUrl="/btc.png"outcomes={[{label: "Yes",probability: 0.72},{label: "No",probability: 0.28},]}/>);}| Component | Description |
|---|---|
EventCard | Card with market image, title, and outcome sliders |
MarketCard | Compact card for a single binary market |
MarketRow | Row layout for market lists |
EventTable | Sortable table of events with columns for price, volume, and change |
FeaturedCarousel | Horizontally scrollable featured events |
| Component | Description |
|---|---|
TradingWidget | Full trading interface (chart + order panel) |
TradePanel | Standalone order entry panel (buy/sell with amount input) |
OrderDrawer | Slide-up order signing drawer (requires wagmi) |
FundsModal | Deposit / withdraw modal (requires wagmi) |
| Component | Description |
|---|---|
OutcomeRow | Interactive outcome row with price and probability |
OutcomeSlider | Draggable probability slider for an outcome |
OutcomeSidebarItem | Compact outcome display for sidebars |
| Component | Description |
|---|---|
LightweightChart | TradingView Lightweight Charts wrapper with time-range controls |
Sparkline | Inline sparkline for price history |
ChartActions | Time range selector (1H, 6H, 1D, 1W, 1M, ALL) |
| Component | Description |
|---|---|
ProfileButton | Wallet connection button (requires RainbowKit) |
SidebarSection | Collapsible sidebar section |
SidebarBannerList | Sidebar banner display |
ConnectionStatus | WebSocket connection indicator |
See COMPONENTS.md for the full visual catalog with props and usage examples.
Browse and interact with all components locally:
npm run storybookOpens at http://localhost:6006.
@pmxt/sdk-- the API client that powers data fetching in these components- Prediction Market Starter -- a full Next.js app built with this library
- API Documentation