npm package: @pmxt/components
Description: Embeddable prediction market UI components built with React and Tailwind CSS
Latest version: 0.2.0

# @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`](https://github.com/pmxt-dev/embed-sdk) for data fetching and order management.

## Install

```bash
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:

```css
@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:

```css
: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

```tsx
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](./COMPONENTS.md) for the full visual catalog with props and
usage examples.

## Storybook

Browse and interact with all components locally:

```bash
npm run storybook
```

Opens at [http://localhost:6006](http://localhost:6006).

## Related

- [`@pmxt/sdk`](https://github.com/pmxt-dev/embed-sdk) -- the API client that powers data fetching in these components
- [Prediction Market Starter](https://github.com/pmxt-dev/prediction-market-starter) -- a full Next.js app built with this library
- [API Documentation](https://docs.pmxt.dev)