Data

OrganizationChart

Organization tree rendered as nested lists with CSS connector lines, optional collapsible branches and a custom node renderer.

Import

import { OrganizationChart } from "@zephora/react";

Examples

Basic

Ada — CEO
- Grace — CTO
  - Alan — Frontend
  - Barbara — Backend
- Katherine — CFO
  - Donald — Accounting

const data: OrgNode = {
  key: "ceo",
  label: "Ada — CEO",
  children: [
    {
      key: "cto",
      label: "Grace — CTO",
      children: [
        { key: "fe", label: "Alan — Frontend" },
        { key: "be", label: "Barbara — Backend" },
      ],
    },
    {
      key: "cfo",
      label: "Katherine — CFO",
      children: [{ key: "acc", label: "Donald — Accounting" }],
    },
  ],
};

<OrganizationChart data={data} />

Collapsible with node clicks

`collapsible` adds expand/collapse toggles to branch nodes; `onNodeClick` fires on click or Enter/Space.

Ada — CEO
- Grace — CTO
  - Alan — Frontend
  - Barbara — Backend
- Katherine — CFO

Last clicked: none

const [last, setLast] = React.useState<string | null>(null);

<OrganizationChart
  data={data}
  collapsible
  defaultCollapsedKeys={["cfo"]}
  onNodeClick={setLast}
/>

API

OrganizationChart props

Prop	Type	Default	Description
`data` *	`OrgNode`	—	Root node of the organization tree: `{ key, label, children? }`.
`collapsible`	`boolean`	`false`	Adds expand/collapse toggles to branch nodes.
`defaultCollapsedKeys`	`string[]`	—	Keys of branches that start collapsed (uncontrolled).
`nodeRender`	`(node: OrgNode) => ReactNode`	—	Custom card renderer — replaces the default label.
`onNodeClick`	`(key: string) => void`	—	Fires when a node card is clicked (or Enter/Space on a focused node).
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.