PortfolioPage
v1.0.36Updated 20 Oct 2026Composed example portfolio page: StatCard health summary + FilterBar + program-grouped project rows, each program fused with a shared-axis TimelineHorizontal mini-Gantt.
Preview
Live · 8 stories▸Why this is recommendedpageportfolioprojectstimeline+3
The default, out-of-the-box PortfolioPage.
- ✓Reference for multi-project portfolio / PMO overview screens
- ✓Program status roll-ups with health + schedule at a glance
- i18n: a labels prop overrides every built-in string; English defaults, brand-free copy
- StatCard health summary (on track / at risk / late / overall progress)
- FilterBar with active at-risk chip variant
- Program-grouped project rows: health Badge, owner Avatar, Progress, dates
- Per-program shared-axis TimelineHorizontal (one lane per project)
- Chart-token program identity dots
- ✕Direct embedding
- ✕Single-project schedules (use RoadmapPage) or task boards (use KanbanPage)
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_PORTFOLIO_PAGE_LABELS (62 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.
—programsThe programs and their projects, from which the stat cards, the counts and the timelines are computed; defaults to the demo portfolio.
—