Org Chart
An org chart showing two levels of the Engineering hierarchy with avatar cards and border connectors, no chart library required.
An org chart showing two levels of the Engineering hierarchy with avatar cards and border connectors, no chart library required.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Org Chart maps the Engineering org: Avery Stone (VP of Engineering) at the root, a connector down to a row of three reports, Priya Nair, Jordan Lee, and Maya Chen, and a sub-level under Priya showing Marcus Kim and Riley Parker. Cards carry avatar, name, and role. Connectors are border-colored divs, no SVG library needed.
People are one recursive OrgPerson tree. The footer line, chart shows direct reports only, sets the right expectation: large orgs stay navigable because depth is limited to two levels here.
Reach for this block on a people or org page when the hierarchy fits within two levels. Wire each card to a profile route; expand depth in the data array when your org warrants it.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the engineering reporting tree. Other org chart uses:
Tip: keep depth to two levels in the block; link each card to its own subtree page for deeper orgs.