Org chart
A top-down org chart with avatar cards, connector lines, collapsible branches with report counts, search that highlights and pans to people, drag to pan and spatial keyboard navigation.
Preview
Maya Lindqvist
, Chief Executive, 3 direct reports
15 in teamOmar Haddad
, VP Engineering, 2 direct reports
Engineering7 in teamPriya Raman
, VP Design, 2 direct reports
Design2 in teamAna Ruiz
, Design Lead
DesignWen Okafor
, Researcher
Design
Marco Bellini
, VP Operations, 2 direct reports
Operations3 in team
Arrow keys move between people: up to the manager, down to reports, left and right between peers. Enter opens or closes a team. Drag the background to pan.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | OrgPerson | — | Root person: { id, name, title, team?, children? }. |
| defaultDepth | number | 1 | Levels open on first render (root is level 0). |
| defaultExpanded | string[] | [] | Extra people whose teams start open. |
| height | number | 440 | Frame height in px. |
| label | string | "Organisation chart" | Accessible name of the tree. |
| onSelect | (person: OrgPerson) => void | — | Called on card click or Enter/Space. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.