OrgChartPage
v1.0.14Updated 27 Aug 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 storiesDefaultOpen ↗
▸Why this is recommendedpagehrorg-charthierarchy+5
The default, out-of-the-box OrgChartPage.
Recommended for+14
- ✓HR / people-ops position hierarchies
- ✓Reporting-line and team-structure screens
Tags+6
pagehrorg-charthierarchypeoplepositionsteamexampledefault
Features+4
- 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
Not recommended for−2
- ✕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
No documented props — OrgChartPage is composed rather than configured. See the source for its full signature.