Org chart

A top-down organizational chart.

AL Ada LovelaceCEO
- GH Grace HopperCTO
  - AT Alan TuringEngineer
- ED Edsger DijkstraCFO

import { BuiOrgChart } from 'ng-blatui';

<bui-org-chart [node]="org" />
// org = { name: 'CEO', children: [{ name: 'CTO' }, ...] }

With avatars

<bui-org-chart [node]="org" />
// nodes can include avatar: '/u.png'

Prop	Type	Default	Description
`node`	`OrgNode \| null`	`null`	Root node of the tree to render; `null` renders nothing.

Prop	Type	Default	Description
`node`*	`OrgNode`	—	Node rendered as a card, with its `children` recursed into nested `<li>`s.

OrgNode

Field	Type	Description
`name`	`string`	Person's name shown on the card; its initials are used when no avatar is set.
`title`?	`string`	Optional role or job title shown as a subtitle below the name.
`avatar`?	`string`	Optional avatar image URL; falls back to initials when absent.
`children`?	`OrgNode[]`	Direct reports rendered recursively as child nodes beneath this one.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.