@pmxt/components

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.

Install

npm install @pmxt/components

Peer dependencies

Required:

• react >= 18
• react-dom >= 18
• lightweight-charts ^5

Optional (only needed if you use wallet or framework-specific components):

• wagmi ^2
• @rainbow-me/rainbowkit ^2
• next >= 14
• canvas-confetti ^1

Setup

Tailwind CSS

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";

Theming

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.

Quick Example

import { EventCard } from "@pmxt/components";

function App() {
  return (
    <EventCard
      title="Will BTC exceed $100k by July 2026?"
      imageUrl="/btc.png"
      outcomes={[
        { label: "Yes", probability: 0.72 },
        { label: "No", probability: 0.28 },
      ]}
    />
  );
}

Components

Market Display

| 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 |

Trading

| 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) |

Outcomes

| Component | Description | |---|---| | OutcomeRow | Interactive outcome row with price and probability | | OutcomeSlider | Draggable probability slider for an outcome | | OutcomeSidebarItem | Compact outcome display for sidebars |

Charts

| 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) |

Layout & Navigation

| 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.

Storybook

Browse and interact with all components locally:

npm run storybook

Opens at http://localhost:6006.

Related

• @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