@pmxt/components

@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