Org Chart Tree: React + Tailwind Component

A collapsible org tree whose SVG connectors reflow along with the node animation.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/org-chart-tree.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Node collapsed by defaultdefaultCollapsed

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<OrgChartTree/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/org-chart-tree.en.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 clear aria-label and an aria-expanded state
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

Org Chart Tree