igt-ui-library

A React UI component library for visualizing MLM / referral network trees, with a flexible Button component. Built with react-d3-tree, fully themeable, zero config needed.

Installation

npm install igt-ui-library

Peer dependencies

Make sure these are installed in your project:

npm install react react-dom react-d3-tree

Components

• MLMTree — interactive network tree visualizer
• Button — multi-variant button component

MLMTree

Renders a collapsible, pannable, zoomable MLM / referral network tree. Nodes expand on click, supports search, 4 visual styles, and 4 connector types.

Basic usage

import { MLMTree } from 'igt-ui-library';

const members = [
  { id: '1', name: 'Alice Johnson', image: 'https://...', parentId: null },
  { id: '2', name: 'Bob Smith',     image: 'https://...', parentId: '1' },
  { id: '3', name: 'Carol White',   image: 'https://...', parentId: '1' },
  { id: '4', name: 'David Brown',   image: 'https://...', parentId: '2' },
];

export default function App() {
  return <MLMTree data={members} />;
}

Important: MLMTree fills 100% of its parent's height and width. Always give the wrapper an explicit height, otherwise the tree will collapse to zero.

// ✅ correct
<div style={{ height: '100vh' }}>
  <MLMTree data={members} />
</div>

// or in Tailwind
<div className="h-screen">
  <MLMTree data={members} />
</div>

Data format

Pass a flat array — the component builds the tree internally:

{
  id:       string   // unique identifier
  name:     string   // display name
  image:    string   // avatar URL (falls back to initials if broken)
  parentId: string | null  // null for the root node
}

Or pass a pre-nested tree object if your API already returns one:

{
  id: '1', name: 'Alice', image: '...', parentId: null,
  children: [
    { id: '2', name: 'Bob', image: '...', children: [] },
  ]
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | data | array \| object | — | Flat member array or nested tree. If omitted, fetches from apiBase. | | apiBase | string | '/api/tree' | Backend URL used only when data is not provided. | | variant | string | 'card' | Node visual style. See variants. | | connector | string | 'step' | Link/arrow style. See connectors. | | theme | object | light defaults | Partial theme override. See theming. |

Node variants

| Value | Description | |---|---| | card | Rounded card with avatar, name, ID badge | | minimal | Floating avatar only, no card box | | pill | Horizontal pill — avatar left, text right | | glass | Frosted gradient card with top color bar |

<MLMTree data={members} variant="glass" />

Connectors

| Value | Description | |---|---| | step | Right-angle with midpoint break (org chart style) | | curve | Smooth cubic bezier | | elbow | 45° diagonal then straight | | straight | Direct line |

<MLMTree data={members} connector="curve" />

Theming

Pass any subset of theme keys — unset keys fall back to the light-mode defaults.

<MLMTree
  data={members}
  theme={{
    primaryColor:    '#6c63ff',
    secondaryColor:  '#ff6584',
    nodeBg:          '#ffffff',
    nodeTextColor:   '#1a1a2e',
    idTextColor:     '#6c63ff',
    canvasBg:        '#f4f4f8',
    headerBg:        '#ffffff',
    headerBorder:    '#e0e0e0',
    headerTextColor: '#1a1a2e',
    inputBg:         '#f0f0f5',
    inputBorder:     '#c0b8ff',
    inputTextColor:  '#1a1a2e',
    linkColor:       null,  // defaults to primaryColor
  }}
/>

Dark theme example

<MLMTree
  data={members}
  variant="glass"
  theme={{
    primaryColor:    '#a78bfa',
    secondaryColor:  '#f472b6',
    nodeBg:          '#1e1e2f',
    nodeTextColor:   '#f0f0f0',
    idTextColor:     '#a78bfa',
    canvasBg:        '#0f0f1a',
    headerBg:        '#13131f',
    headerBorder:    '#2a2a3f',
    headerTextColor: '#a78bfa',
    inputBg:         '#1e1e2f',
    inputBorder:     '#a78bfa55',
    inputTextColor:  '#f0f0f0',
  }}
/>

Using with your own backend

If you skip the data prop, the component fetches from apiBase:

<MLMTree apiBase="https://your-api.com/api/tree" />

Expected endpoints:

| Method | Path | Returns | |---|---|---| | GET | /api/tree | Nested tree object (root node) | | GET | /api/tree/flat | Flat array of all members | | GET | /api/tree/node/:id | Subtree from a given node |

Button

A flexible button with 4 variants, 5 colors, 3 sizes, icon support, loading and disabled states.

Basic usage

import { Button } from 'igt-ui-library';

<Button>Click me</Button>
<Button variant="outline" color="success">Confirm</Button>
<Button variant="soft"    color="danger"  size="sm">Delete</Button>

Props

| Prop | Type | Default | Description | |---|---|---|---| | variant | string | 'solid' | solid | outline | ghost | soft | | color | string | 'primary' | primary | secondary | success | danger | neutral | | size | string | 'md' | sm | md | lg | | icon | ReactNode | — | Icon on the left | | iconRight | ReactNode | — | Icon on the right | | loading | boolean | false | Shows spinner, disables interaction | | disabled | boolean | false | Grays out, disables interaction | | fullWidth | boolean | false | Stretches to container width | | onClick | function | — | Click handler |

Variants

<Button variant="solid"   color="primary">Solid</Button>
<Button variant="outline" color="primary">Outline</Button>
<Button variant="ghost"   color="primary">Ghost</Button>
<Button variant="soft"    color="primary">Soft</Button>

Colors

<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="danger">Danger</Button>
<Button color="neutral">Neutral</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

With icons

const PlusIcon = (
  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"
    style={{ width: '100%', height: '100%' }}>
    <path d="M8 3v10M3 8h10" />
  </svg>
);

<Button icon={PlusIcon}>Add Member</Button>
<Button iconRight={ArrowIcon} variant="soft">View Tree</Button>

// Icon only
<Button icon={PlusIcon} />

Loading & disabled

<Button loading>Saving…</Button>
<Button disabled>Unavailable</Button>

Full width

<Button fullWidth color="primary">Submit</Button>

Full example

import { MLMTree, Button } from 'igt-ui-library';

const members = [
  { id: '1', name: 'Alice Johnson', image: 'https://i.pravatar.cc/60?img=1', parentId: null },
  { id: '2', name: 'Bob Smith',     image: 'https://i.pravatar.cc/60?img=2', parentId: '1'  },
  { id: '3', name: 'Carol White',   image: 'https://i.pravatar.cc/60?img=3', parentId: '1'  },
];

export default function App() {
  return (
    <div style={{ height: '100vh' }}>
      <MLMTree
        data={members}
        variant="card"
        connector="curve"
        theme={{ primaryColor: '#7c3aed', secondaryColor: '#db2777' }}
      />
      <Button variant="soft" color="primary">Add Node</Button>
    </div>
  );
}

Publishing

# Build the package
npm run build:lib

# Publish to npm (must be logged in)
npm publish

License

MIT