Fancy MLM UI

@particle-academy/fancy-mlm-ui — React components for Fancy MLM: a downline tree, a commission statement, and rank progress. Controlled, JSON-friendly, and agent-driveable (stable data-mlm-* handles), built to pair with @particle-academy/react-fancy and Tailwind v4.

v0.2: the three view components below, and the DownlineTree now renders every engine tree shape from one member list — edge="sponsor" (unilevel) or edge="placement" (binary / matrix). A <PlanBuilder> admin surface and an agent-integrations bridge (registerMlmBridge) are on the roadmap.

Install

npm install @particle-academy/fancy-mlm-ui

import "@particle-academy/fancy-mlm-ui/styles.css";

Peers: react, react-dom, tailwindcss v4, @particle-academy/react-fancy.

Components

import { DownlineTree, CommissionStatement, RankProgress } from "@particle-academy/fancy-mlm-ui";

// Genealogy tree — flat member list, controlled selection. `edge` picks the
// shape: "sponsor" (unilevel, default) or "placement" (binary / matrix).
<DownlineTree
  edge="sponsor"
  value={[
    { id: "you", label: "You", tier: "gold" },
    { id: "a", sponsorId: "you", placementId: "you", label: "Ada", tier: "silver" },
    { id: "b", sponsorId: "you", placementId: "a", label: "Bo", active: false },
  ]}
  selectedId={selected}
  onSelect={setSelected}
/>

// Commission / referral-bonus statement (typically the engine's RewardComputation list).
<CommissionStatement rows={rows} formatAmount={(n) => `$${n.toFixed(2)}`} />

// Rank + progress to the next tier.
<RankProgress tier="gold" nextTier="diamond" value={7} target={10} unit="legs" />

Every member row carries a stable data-mlm-node, every statement row a data-mlm-commission-row, and the rank bar a data-mlm-rank-pct — so an agent reads and drives these surfaces by handle, never by scraping.

Develop

npm install
npm test       # vitest
npm run build  # tsup -> dist (ESM + CJS + types + styles.css)

License

MIT.