OrgChartPage
v1.0.34Updated 20 Oct 2026Composed example HR org-chart page: StatCard strip + FilterBar over a recursive position-hierarchy diagram with token-drawn connectors, team identity chips and a dashed hiring node. Reference for people/HR hierarchy screens.
Preview
Live · 8 stories▸Why this is recommendedpagehrorg-charthierarchy+5
The default, out-of-the-box OrgChartPage.
- ✓HR / people-ops position hierarchies
- ✓Reporting-line and team-structure screens
- i18n: a labels prop overrides every built-in string; English defaults, brand-free copy
- Recursive org tree with pure-token connector lattice (no SVG)
- Owner root node + four team branches on chart tokens
- Dashed "Hiring" node for an open requisition
- StatCard strip: headcount / open roles / teams / span of control
- FilterBar with people search + team chips
- condensed prop: compact nodes for larger orgs
- Horizontal scroll container for wide trees
- ✕Direct embedding
- ✕File/folder trees (use FileBrowser)
- ✕Workflow diagrams (use RuleStep / WorkflowDesignerPage)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
labelsOverride every built-in string and aria-label (i18n). Merged over DEFAULT_ORG_CHART_PAGE_LABELS (39 English keys); every template in the file accepts it. The rendered DEFAULTS are English — page templates used to hardcode their copy, which no consumer could translate or ship. MCP feedback fb_ba2ec12f.
—