Org Chart

Visual organisation hierarchy.

html

<div class="orgchart orgchart--vertical" style="--c:#D9C8F0;">
  <div class="orgchart__node orgchart__node--root">
    <strong>Morgan Reeve</strong>
    <span class="orgchart__title">Chief Executive</span>
  </div>
  <div class="orgchart__branch">
    <div class="orgchart__node">
      <strong>Alex Chen</strong>
      <span class="orgchart__title">VP Engineering</span>
    </div>
    <div class="orgchart__node">
      <strong>Jordan Lee</strong>
      <span class="orgchart__title">VP Design</span>
    </div>
  </div>
</div>
<style>
.orgchart { font: 14px/1.4 system-ui, sans-serif; color: #241430; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.orgchart__node { border: 1.5px solid var(--c); background: #FAF7F2; border-radius: 10px; padding: 8px 14px; text-align: center; min-width: 120px; }
.orgchart__node--root { background: var(--c); }
.orgchart__title { display: block; font-size: 12px; opacity: .75; }
.orgchart__branch { display: flex; gap: 24px; position: relative; padding-top: 18px; }
.orgchart__branch::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 18px; background: var(--c); transform: translateX(-50%); }
.orgchart--horizontal { flex-direction: row; align-items: flex-start; }
.orgchart--horizontal .orgchart__branch { flex-direction: column; padding-top: 0; padding-left: 18px; }
.orgchart--horizontal .orgchart__branch::before { top: 50%; left: 0; width: 18px; height: 1px; transform: translateY(-50%); }
</style>

tailwind

<div class="orgchart-tw orgchart-tw--vertical flex flex-col items-center gap-4 font-sans text-[#241430]" style="--c:#D9C8F0;">
  <div class="border-[1.5px] rounded-[10px] px-3.5 py-2 text-center min-w-[120px]" style="border-color:var(--c);background:var(--c);">
    <strong>Morgan Reeve</strong>
    <span class="block text-xs opacity-75">Chief Executive</span>
  </div>
  <div class="orgchart-tw__branch flex gap-6 relative pt-4">
    <div class="border-[1.5px] rounded-[10px] px-3.5 py-2 text-center min-w-[120px] bg-[#FAF7F2]" style="border-color:var(--c);">
      <strong>Alex Chen</strong>
      <span class="block text-xs opacity-75">VP Engineering</span>
    </div>
    <div class="border-[1.5px] rounded-[10px] px-3.5 py-2 text-center min-w-[120px] bg-[#FAF7F2]" style="border-color:var(--c);">
      <strong>Jordan Lee</strong>
      <span class="block text-xs opacity-75">VP Design</span>
    </div>
  </div>
</div>
<style>
.orgchart-tw--horizontal { flex-direction: row; align-items: flex-start; }
.orgchart-tw--horizontal .orgchart-tw__branch { flex-direction: column; padding-top: 0; padding-left: 1rem; }
</style>

react

export function OrgChart({
  rootName = "Morgan Reeve",
  rootTitle = "Chief Executive",
  layout = "vertical",
  color = "#D9C8F0",
  showTitles = true,
}) {
  const nodeStyle = { border: `1.5px solid ${color}`, borderRadius: 10, padding: "8px 14px", textAlign: "center", minWidth: 120, background: "#FAF7F2" };
  return (
    <div style={{ display: "flex", flexDirection: layout === "horizontal" ? "row" : "column", alignItems: layout === "horizontal" ? "flex-start" : "center", gap: 18, font: "14px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <div style={{ ...nodeStyle, background: color }}>
        <strong>{rootName}</strong>
        {showTitles && <span style={{ display: "block", fontSize: 12, opacity: 0.75 }}>{rootTitle}</span>}
      </div>
      <div style={{ display: "flex", flexDirection: layout === "horizontal" ? "column" : "row", gap: layout === "horizontal" ? 12 : 24 }}>
        <div style={nodeStyle}><strong>Alex Chen</strong>{showTitles && <span style={{ display: "block", fontSize: 12, opacity: 0.75 }}>VP Engineering</span>}</div>
        <div style={nodeStyle}><strong>Jordan Lee</strong>{showTitles && <span style={{ display: "block", fontSize: 12, opacity: 0.75 }}>VP Design</span>}</div>
      </div>
    </div>
  );
}