# Org Chart

> The hierarchy as a chart: orchestrator, leads per team, executing agents and people.

Component · AI · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/OrgChart/)

The hierarchy as a chart: orchestrator, leads per team, executing agents and people.

Props: `root` ({name, role, tint, status, avatar, children}). Scrolls sideways when wide.

## Example

```tsx
import { OrgChart } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div className="tf-panel">
      <OrgChart
        root={{
          name: "Main Brain",
          role: "Orchestrator",
          tint: "lilac",
          status: "ok",
          children: [
            {
              name: "Atlas",
              role: "Support lead",
              tint: "sky",
              status: "running",
              children: [
                {
                  name: "Triage",
                  role: "Tags mail",
                  tint: "sky",
                  status: "idle",
                },
                {
                  name: "Drafts",
                  role: "Writes replies",
                  tint: "sky",
                  status: "signal",
                },
              ],
            },
            {
              name: "Ledger",
              role: "Finance lead",
              tint: "butter",
              status: "ok",
            },
            {
              name: "Robin",
              role: "Owner",
              avatar: true,
            },
          ],
        }}
      />
    </div>
  );
}
```

## Props

### OrgChart

| Prop | Type | Notes |
| --- | --- | --- |
| `root` | `OrgNode` | Required |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |