@pmxt/components

@pmxt/components

Embeddable prediction market UI components built with React and Tailwind CSS.

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

CSS Variables

All components are themed through CSS custom properties. Define them on :root (or any ancestor element):

: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 to match your brand -- 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

The package exports the following components:

Component	Description
EventCard	Card with market image, title, and outcome sliders
MarketCard	Compact card for a single binary market
MarketRow / OutcomeRow	Row-based layouts for market lists
TradingWidget	Full trading interface (chart + order panel)
TradePanel	Standalone order entry panel
OrderDrawer	Slide-up order signing drawer (requires wagmi)
FundsModal	Deposit / withdraw modal (requires wagmi)
LightweightChart	TradingView Lightweight Charts wrapper
Sparkline	Inline sparkline for price history
FeaturedCarousel	Horizontally scrollable featured events
EventTable	Sortable table of events
ProfileButton	Wallet connection button (requires rainbowkit)
SidebarSection / SidebarBannerList	Sidebar navigation primitives
ConnectionStatus	WebSocket connection indicator

See COMPONENTS.md for the full visual catalog with props and usage examples.

Links

• @pmxt/sdk -- API client for the PMXT Embed API
• Starter repo -- clone and deploy in minutes