Org Chart Tree
A collapsible org tree whose SVG connectors reflow along with the node animation.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
Renders org tree data recursively: each node is a card with a gradient initials avatar, a name, and a job title, and clicking the button at the bottom of the card collapses or expands the subtree (folded with a height animation). Parents and children are strung together with connectors, and while collapsed the button shows the number of direct reports.
npx shadcn@latest add "https://webberui.com/r/org-chart-tree.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<OrgChartTree />
Installation
npx shadcn@latest add "https://webberui.com/r/org-chart-tree.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/org-chart-tree.
Usage
import { OrgChartTree, type OrgNode } from "@/components/ui/org-chart-tree";
const tree: OrgNode = {
id: "ceo",
name: "Lin Hsiao-tung",
title: "Chief Executive Officer",
children: [
{ id: "cto", name: "Chen Chien-hung", title: "Chief Technology Officer" },
{ id: "cpo", name: "Huang Shih-han", title: "Chief Product Officer" },
],
};
<OrgChartTree data={tree} defaultCollapsed={["cto"]} />Props
OrgChartTree
| Prop | Type | Default | Description |
|---|---|---|---|
data | OrgNode | — | The org tree data (a single root node, rendered recursively downward) |
defaultCollapsed | string[] | [] | List of node ids that start out collapsed |
onToggle | (id: string, collapsed: boolean) => void | — | Callback when a node expands or collapses |
className | string | — | Forwarded to the outermost container |
OrgNode
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique node identifier, used as the basis for the collapsed state and the key |
name | string | — | Member name, used for display and for the avatar initials |
title | string | — | Job title, shown below the name |
hue | number | hashed from id | Hue of the avatar background (0–360) |
children | OrgNode[] | — | Direct child nodes; omit it and the node is a leaf |
Accessibility
- Collapse/expand is a native
<button>that can be focused with Tab and triggered with Enter or Space, carrying a cleararia-labeland anaria-expandedstate - When the user has "reduce motion" enabled at the system level, collapsing, expanding, and the reveal animation switch straight over without playing a transition
- The connectors and the avatar initials are decorative only, hidden from assistive technology with
aria-hidden, so only the name and the job title are announced - The avatar hue is produced by a deterministic hash of
id, so SSR and client rendering agree and no hydration mismatch occurs