"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; export type OrgNode = { id: string; name: string; title?: string; color?: string; avatar?: string; children?: OrgNode[] }; export type OrgChartProps = { data: OrgNode; /** Levels expanded initially. */ defaultDepth?: number; onSelect?: (node: OrgNode) => void; className?: string; }; const initials = (n: string) => n.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase(); const countAll = (n: OrgNode): number => (n.children ?? []).reduce((a, c) => a + 1 + countAll(c), 0); function Node({ node, depth, defaultDepth, onSelect, selected }: { node: OrgNode; depth: number; defaultDepth: number; onSelect: (n: OrgNode) => void; selected?: string }) { const [open, setOpen] = React.useState(depth < defaultDepth); const kids = node.children ?? []; return (

onSelect(node)} className={cn("relative z-[1] flex w-36 flex-col items-center gap-1.5 rounded-2xl border bg-surface p-3 text-center transition-colors", selected === node.id ? "border-accent" : "border-border hover:border-border-strong")} > {node.avatar ?

: initials(node.name)} {node.name} {node.title ? {node.title} : null} {kids.length ? ( ) : null} {open && kids.length ? ( {kids.map((k) => ( ))} ) : null}

); } /** Collapsible organisation chart with connector lines and team counts. Scroll horizontally on small screens. */ export function OrgChart({ data, defaultDepth = 2, onSelect, className }: OrgChartProps) { const [selected, setSelected] = React.useState(); return (

{ setSelected(n.id); onSelect?.(n); }} />

); }

Org Chart

Installation

Exports