Organization Chart React component
An org chart of people cards joined by rounded connector lines: teams open and close from a count chip under each manager, and picking someone lights up their reporting line all the way to the top.
When to use the Organization Chart component
Use Organization Chart for team pages, about pages, internal directories and HR tools: anywhere people need to see who reports to whom. Teams stay folded until opened, so large companies stay readable.
Pass onSelect to open a profile or side panel for the person picked; their reporting line stays highlighted for context.
Installation
Add the Organization Chart component to your project with the shadcn CLI. It lands in components/organization-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/organization-chart.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<OrganizationChart /> accepts 6 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| data | object | DEFAULT_DATA |
| data.id* | string | — |
| data.name* | string | — |
| data.title | string | — |
| data.image Photo URL; initials are used when it's missing. | string | — |
| data.children | { id: string; name: string; title?: string; image?: string; children?: OrgNode[] }[] | — |
| defaultDepth Levels open at first (0 = only the top person). | number | 2 |
| onSelect Called when a person is picked; their chain up to the top is highlighted. | (node: OrgNode) => void | — |
| defaultSelected | string | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- dataobjectDefault: DEFAULT_DATA
- data.id*string
- data.name*string
- data.titlestring
- data.image
Photo URL; initials are used when it's missing.
string - data.children{ id: string; name: string; title?: string; image?: string; children?: OrgNode[] }[]
- defaultDepth
Levels open at first (0 = only the top person).
numberDefault: 2 - onSelect
Called when a person is picked; their chain up to the top is highlighted.
(node: OrgNode) => void - defaultSelectedstring
- theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- How big can the chart get?
- Only open teams are drawn, and the chart scrolls sideways when it's wider than its container. Start with defaultDepth 1 or 2 for large organisations.
- Can I show photos?
- Yes. Give a person an image URL; without one their initials are shown.
- What does selecting someone do?
- Their card gets a ring and every connector and manager card up to the top is highlighted, and onSelect receives their node.
