Component reference — 35 composable slide components

Updated 2026-04-20 · ~15 min read · Reference guide

slideforge.dev ships 35 composable components that cover charts, diagrams, specialized consulting primitives, layouts, and content blocks. This is the canonical reference. Every component has a one-line description, use cases, JSON spec example, and the key parameters it accepts. Components compose — nest any component inside a SplitView or Card container to build exec dashboards from primitives.

Related: PowerPoint API guide · Try in the generator · MCP setup

How to call a component

Three equivalent entry points — same spec, same output:

REST API

POST https://api.slideforge.dev/v1/render
Authorization: Bearer sf_live_...

{
  "spec": {
    "chrome": {"title": "Q3 Revenue"},
    "body":   {"component": "waterfall", "params": {"bars": [...]}}
  }
}

MCP tool (Claude Desktop, Cursor)

create_slide(
  mode="spec",
  spec={"body": {"component": "waterfall", "params": {...}}}
)

Natural-language brief

create_slide(
  brief="Revenue waterfall: starting $8.2M, new $2.1M, churn -$0.6M, ending $10.8M"
)
// Auto-routes to the waterfall component via brief → component match.

Full catalog discovery via search_catalog(type="components") in MCP or GET /v1/components in REST.

Chart components

Data-visual primitives rendered as editable PowerPoint shapes (not images). Every chart is a composition of native .pptx rectangles, lines, text boxes — you can edit colors, values, and labels in PowerPoint after generation.

Metric

Row of headline KPI tiles with value, label, and optional trend.

Use cases: Executive dashboards; single-slide performance summaries.

Show spec example
{
  "component": "metric",
  "params": {
    "metrics": [
      {"value": "$12.4M", "label": "Revenue", "trend": "+18% YoY"},
      {"value": "847", "label": "New Clients", "trend": "+23%"},
      {"value": "94%", "label": "Retention"}
    ]
  }
}
  • metrics[] — Array of {value, label, trend?}

BarList

Horizontal bar chart — one bar per row, sorted by value.

Use cases: Revenue by segment, traffic by channel, votes by option.

Show spec example
{
  "component": "bar_list",
  "params": {
    "rows": [
      {"label": "North America", "value": 4.2, "unit": "M"},
      {"label": "Europe", "value": 3.1, "unit": "M"},
      {"label": "APAC", "value": 2.0, "unit": "M"}
    ]
  }
}
  • rows[] — Array of {label, value, unit?, color?}

Donut

Donut or pie chart with segment labels and percentages.

Use cases: Market share breakdowns, budget allocations, funnel stage ratios.

Show spec example
{
  "component": "donut",
  "params": {
    "segments": [
      {"label": "Enterprise", "value": 45},
      {"label": "Mid-market", "value": 35},
      {"label": "SMB", "value": 20}
    ]
  }
}
  • segments[] — Array of {label, value, color?}

LineTrend

Time-series line chart with 1+ series, markers, and area fill.

Use cases: MRR trend, user growth, weekly active sessions.

Show spec example
{
  "component": "line_trend",
  "params": {
    "series": [
      {"name": "ARR", "points": [8.2, 8.7, 9.4, 10.1, 10.8]}
    ],
    "x_labels": ["Jan", "Feb", "Mar", "Apr", "May"]
  }
}
  • series[] — Array of {name, points[]}
  • x_labels[] — X-axis category labels

StackedBar

Vertical stacked bars comparing multiple categories per group.

Use cases: Revenue breakdown by segment across quarters; project burndown categories.

Show spec example
{
  "component": "stacked_bar",
  "params": {
    "rows": [
      {"label": "Q1", "values": [30, 20, 10]},
      {"label": "Q2", "values": [35, 25, 15]}
    ],
    "categories": ["Enterprise", "Mid-market", "SMB"]
  }
}
  • rows[] — Array of {label, values[]}
  • categories[] — Series names for legend

Waterfall

Classic finance waterfall showing start → deltas → end.

Use cases: Revenue bridge (new/expansion/churn/contraction), P&L variance, cost build-up.

Show spec example
{
  "component": "waterfall",
  "params": {
    "bars": [
      {"label": "Starting ARR", "value": 8.2, "type": "start"},
      {"label": "New business", "value": 2.1, "type": "add"},
      {"label": "Expansion", "value": 1.4, "type": "add"},
      {"label": "Churn", "value": -0.6, "type": "subtract"},
      {"label": "Contraction", "value": -0.3, "type": "subtract"},
      {"label": "Ending ARR", "value": 10.8, "type": "end"}
    ]
  }
}
  • bars[] — Array of {label, value, type: start|end|add|subtract}

Funnel

Top-to-bottom conversion funnel with drop-off annotations.

Use cases: Sales pipeline conversion, signup-to-paid funnel, recruitment stages.

Show spec example
{
  "component": "funnel",
  "params": {
    "stages": [
      {"label": "Visits", "value": 10000},
      {"label": "Signups", "value": 850},
      {"label": "Activated", "value": 340},
      {"label": "Paid", "value": 62}
    ]
  }
}
  • stages[] — Array of {label, value}

Heatmap

Color-gradient cell grid for two-dimensional data.

Use cases: Cohort retention, weekly activity by hour, feature usage by segment.

Show spec example
{
  "component": "heatmap",
  "params": {
    "cells": [[95, 88, 82], [90, 85, 78], [88, 82, 75]],
    "x_labels": ["Week 1", "Week 2", "Week 3"],
    "y_labels": ["Jan cohort", "Feb cohort", "Mar cohort"]
  }
}
  • cells[][] — 2D array of numeric values
  • x_labels / y_labels — Axis category labels

Radial

Concentric-circle layout for layered relationships (TAM/SAM/SOM, nested orgs).

Use cases: Market sizing (TAM/SAM/SOM), maturity hierarchies, onion diagrams.

Show spec example
{
  "component": "radial",
  "params": {
    "center": {"label": "SOM", "value": "$2M"},
    "nodes": [
      {"label": "SAM", "value": "$12M"},
      {"label": "TAM", "value": "$80M"}
    ]
  }
}
  • center — Innermost layer object
  • nodes[] — Outer layers in inner-to-outer order

ProgressBar

Horizontal progress bars — percent complete per item.

Use cases: Epic progress, quota attainment, rollout status per region.

Show spec example
{
  "component": "progress_bar",
  "params": {
    "items": [
      {"label": "Auth refactor", "value": 85},
      {"label": "Billing v2", "value": 60},
      {"label": "API gateway", "value": 40}
    ]
  }
}
  • items[] — Array of {label, value (0-100)}

Diagram components

Relationship and process diagrams. Nodes, connectors, and hierarchies laid out automatically — no manual alignment math.

OrgChart

Hierarchical tree diagram with nodes, titles, and branch lines.

Use cases: Team structure, reporting lines, stakeholder maps, vendor tree.

Show spec example
{
  "component": "org_chart",
  "params": {
    "root": {
      "title": "CEO", "name": "Alex Chen",
      "children": [
        {"title": "VP Engineering", "name": "Sam Patel",
         "children": [{"title": "EM Platform"}, {"title": "EM Product"}]},
        {"title": "VP Product", "name": "Jordan Lee"},
        {"title": "VP GTM", "name": "Taylor Kim"}
      ]
    }
  }
}
  • root — Tree root; each node has {title, name?, children[]?}

ThreeHorizons

McKinsey Three Horizons strategy framework as three curved arcs.

Use cases: Strategic roadmap (defend core / extend to adjacent / explore new), venture portfolio.

Show spec example
{
  "component": "three_horizons",
  "params": {
    "horizons": [
      {"name": "H1", "label": "Defend core",
       "items": ["API reliability", "Customer retention"]},
      {"name": "H2", "label": "Extend adjacent",
       "items": ["Enterprise features", "New verticals"]},
      {"name": "H3", "label": "Explore new",
       "items": ["Marketplace", "Platform partnerships"]}
    ]
  }
}
  • horizons[] — Array of 3 objects: {name, label, items[]}

MaturityModel

Multi-dimension maturity assessment with level markers per dimension.

Use cases: Capability assessment, digital transformation scorecard, process maturity review.

Show spec example
{
  "component": "maturity_model",
  "params": {
    "dimensions": ["Automation", "Data quality", "Talent"],
    "assessments": [
      {"dimension": "Automation", "level": 3, "label": "Defined"},
      {"dimension": "Data quality", "level": 2, "label": "Managed"},
      {"dimension": "Talent", "level": 4, "label": "Optimized"}
    ]
  }
}
  • dimensions[] — Dimension names
  • assessments[] — Array of {dimension, level (1-5), label}

Gantt

Project timeline with bars per task, phases, and milestones.

Use cases: Implementation plan, product roadmap by quarter, project schedule.

Show spec example
{
  "component": "gantt",
  "params": {
    "periods": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "phases": ["Discovery", "Build", "Launch"],
    "rows": [
      {"task": "Research", "phase": "Discovery", "start": 0, "end": 2},
      {"task": "MVP build", "phase": "Build", "start": 1, "end": 4},
      {"task": "GA launch", "phase": "Launch", "start": 4, "end": 6}
    ]
  }
}
  • rows[] — Array of {task, phase, start, end}
  • periods[] / phases[] — Timeline axis + phase grouping

Swimlane

Grid of lanes (rows) × phases (columns) with items placed per cell.

Use cases: Cross-functional process diagram, handoff flow, RACI by phase.

Show spec example
{
  "component": "swimlane",
  "params": {
    "lanes": [{"label": "Product"}, {"label": "Engineering"}, {"label": "Sales"}],
    "phases": ["Discovery", "Build", "Launch", "Sustain"],
    "data": [
      {"lane": 0, "phase": 0, "text": "User research"},
      {"lane": 1, "phase": 1, "text": "Implementation"},
      {"lane": 2, "phase": 2, "text": "GTM campaign"}
    ]
  }
}
  • lanes[] / phases[] — Row and column headers
  • data[] — Array of {lane, phase, text, color?}

Pyramid

Stacked pyramid of layers — foundation to pinnacle.

Use cases: Maslow-style hierarchies, capability pyramids, org layers by seniority.

Show spec example
{
  "component": "pyramid",
  "params": {
    "layers": [
      {"label": "Vision", "description": "North star"},
      {"label": "Strategy", "description": "3-year plan"},
      {"label": "Execution", "description": "Sprint-level"}
    ]
  }
}
  • layers[] — Array of {label, description?} — top-first order

Roadmap

Track-by-period grid of initiatives with status colors.

Use cases: Product roadmap by track, feature release plan, portfolio view.

Show spec example
{
  "component": "roadmap",
  "params": {
    "tracks": ["Platform", "Mobile", "Analytics"],
    "periods": ["Q1", "Q2", "Q3", "Q4"],
    "items": [
      {"track": 0, "period": 0, "label": "Auth v2", "status": "done"},
      {"track": 1, "period": 1, "label": "iOS app", "status": "in-progress"},
      {"track": 2, "period": 2, "label": "ML insights", "status": "planned"}
    ]
  }
}
  • items[] — Array of {track, period, label, status}

Specialized / consulting primitives

Purpose-built for consulting, PMO, and finance decks. These components encode conventions: BurndownChart knows ideal vs actual lines; RAGScorecard knows red/amber/green; UnitEconomics auto-flags unhealthy LTV:CAC ratios; CapTable auto-calculates ownership percentages.

BurndownChart

Sprint burndown — ideal vs actual remaining work over time.

Use cases: Sprint retrospective, PI progress, agile dashboard.

Show spec example
{
  "component": "burndown_chart",
  "params": {
    "x_labels": ["D1","D2","D3","D4","D5","D6","D7","D8","D9","D10"],
    "ideal": [40, 36, 32, 28, 24, 20, 16, 12, 8, 0],
    "actual": [40, 38, 35, 32, 28, 25, 21, 17, 12, 5]
  }
}
  • ideal[] / actual[] — Remaining work per time-step

RAGScorecard

Traffic-light status grid — rows + columns with Red/Amber/Green cells.

Use cases: PMO status report, initiative health, portfolio scorecard.

Show spec example
{
  "component": "rag_scorecard",
  "params": {
    "rows": [
      {"project": "Auth refactor", "scope": "G", "schedule": "A", "budget": "G"},
      {"project": "Billing v2", "scope": "A", "schedule": "R", "budget": "A"},
      {"project": "API gateway", "scope": "G", "schedule": "G", "budget": "G"}
    ]
  }
}
  • rows[] — Array of objects — first key is row label, rest are R/A/G columns

UnitEconomics

LTV : CAC ratio visualization with healthy-zone indicators.

Use cases: Fundraising deck unit economics slide, SaaS health review.

Show spec example
{
  "component": "unit_economics",
  "params": {
    "cac": 420,
    "ltv": 3800,
    "payback_months": 14
  }
}
  • cac / ltv — USD values; auto-flags LTV:CAC < 3×
  • payback_months — CAC payback period

CapTable

Capitalization table showing holders, share counts, and ownership percentages.

Use cases: Fundraising deck, M&A due diligence, founder review.

Show spec example
{
  "component": "cap_table",
  "params": {
    "holders": [
      {"name": "Founders", "shares": 6000000},
      {"name": "Series A", "shares": 2500000},
      {"name": "Option pool", "shares": 1500000}
    ]
  }
}
  • holders[] — Array of {name, shares}; percentages computed automatically

Tracker

Headline value + RAG-style status indicator + supporting tiles.

Use cases: Executive KPI snapshot, dashboard header, initiative summary.

Show spec example
{
  "component": "tracker",
  "params": {
    "headline": {"value": "94%", "label": "Overall health"},
    "status": "green",
    "data": [
      {"label": "Open risks", "value": "3"},
      {"label": "Blockers", "value": "0"}
    ]
  }
}
  • headline — Primary metric object
  • status — red | amber | green

Testimonial

Customer quote with attribution (name, title, company, photo optional).

Use cases: Sales deck social proof, landing page testimonial section, investor update.

Show spec example
{
  "component": "testimonial",
  "params": {
    "quote": "Cut our report generation from 4 hours to 2 minutes.",
    "name": "Priya Shah",
    "title": "Director of Analytics",
    "company": "Acme Corp"
  }
}
  • quote / name / title / company — Required text fields

Layout containers

Structural components that organize the slide. SplitView and Card support composition — their cells accept nested {component, params} objects so you can build exec dashboards from primitives.

SplitView

Two-panel left/right layout. Accepts composed nested components.

Use cases: Chart-plus-commentary, before-and-after, comparison pairs.

Show spec example
{
  "component": "split_view",
  "params": {
    "left":  {"component": "metric", "params": {"metrics": [...]}},
    "right": {"component": "bar_list", "params": {"rows": [...]}}
  }
}
  • left / right — Each is a full {component, params} object (composition)

Card

Column of equal-width cards. Each card can be text or a nested component.

Use cases: Pricing tiers, feature grid, 3-up summary layout.

Show spec example
{
  "component": "card",
  "params": {
    "cards": [
      {"component": "stat_card", "params": {"value": "Free", "label": "Starter"}},
      {"component": "stat_card", "params": {"value": "$49/mo", "label": "Pro"}},
      {"component": "stat_card", "params": {"value": "$199/mo", "label": "Team"}}
    ]
  }
}
  • cards[] — Array of card bodies — plain text or {component, params}

Quadrant

2×2 matrix (axis labels + quadrant titles + item placement).

Use cases: BCG growth-share matrix, priority grid, build-vs-buy analysis.

Show spec example
{
  "component": "quadrant",
  "params": {
    "x_axis": {"label": "Cost", "low": "Low", "high": "High"},
    "y_axis": {"label": "Speed", "low": "Slow", "high": "Fast"},
    "quadrants": [
      {"title": "Build", "items": ["Custom API"]},
      {"title": "Buy",   "items": ["SaaS tool"]},
      {"title": "Wait",  "items": ["Future"]},
      {"title": "Skip",  "items": ["Legacy"]}
    ]
  }
}
  • x_axis / y_axis — Axis definitions with low/high labels
  • quadrants[] — 4 objects in TL, TR, BL, BR order

ComparisonTable

Feature comparison grid with check/X/dash cells.

Use cases: Product vs competitor, plan comparison, build-vs-buy table.

Show spec example
{
  "component": "comparison_table",
  "params": {
    "headers": ["Feature", "Us", "Competitor"],
    "rows": [
      ["API", "✓", "—"],
      ["MCP", "✓", "✗"],
      ["Composable components", "35", "0"]
    ]
  }
}
  • headers[] / rows[][] — Table headers + row cells

Timeline

Horizontal axis with dated phases and event annotations.

Use cases: Company history, product release schedule, campaign rollout.

Show spec example
{
  "component": "timeline",
  "params": {
    "phases": [
      {"date": "Q1 2026", "label": "MVP launch", "description": "First 50 customers"},
      {"date": "Q2 2026", "label": "Enterprise tier"},
      {"date": "Q3 2026", "label": "API GA"}
    ]
  }
}
  • phases[] — Array of {date, label, description?}

Steps / ArrowFlow

Sequential process steps with arrow connectors.

Use cases: Onboarding flow, sales process, incident response playbook.

Show spec example
{
  "component": "steps",
  "params": {
    "steps": [
      {"title": "1. Sign up", "description": "$3 free credit"},
      {"title": "2. Describe", "description": "Write a brief"},
      {"title": "3. Generate", "description": ".pptx in <2s"},
      {"title": "4. Iterate", "description": "Refine with feedback"}
    ]
  }
}
  • steps[] — Array of {title, description?}

Content blocks

Text and imagery primitives that fill cells of layout containers.

List

Titled bullet list with optional colored markers.

Use cases: Key takeaways, action items, list of features.

Show spec example
{
  "component": "list",
  "params": {
    "title": "Q3 priorities",
    "items": ["Ship MCP auth", "Expand components", "Launch pricing page"]
  }
}
  • items[] — Array of strings or {label, color} objects

IconGrid

Grid of icon + title + short description cards.

Use cases: Feature grid, value prop grid, 4-up benefits.

Show spec example
{
  "component": "icon_grid",
  "params": {
    "cards": [
      {"icon": "zap", "title": "Fast", "description": "Sub-second render"},
      {"icon": "shield", "title": "Safe", "description": "Visual QA built-in"},
      {"icon": "plug", "title": "Pluggable", "description": "REST + MCP"}
    ]
  }
}
  • cards[] — Array of {icon, title, description?}

StatCard

Single oversized number with label and optional context.

Use cases: Hero metric, pricing tier value, headline stat.

Show spec example
{
  "component": "stat_card",
  "params": {
    "value": "$12.4M",
    "label": "Q3 revenue",
    "description": "+18% YoY growth"
  }
}
  • value / label / description — Text fields; value is oversized

Callout

Highlighted text box — quote, warning, key insight, or annotation.

Use cases: Pull quote, risk callout, key insight annotation.

Show spec example
{
  "component": "callout",
  "params": {
    "text": "NPS jumped 12 points after the Q3 onboarding refresh.",
    "style": "highlight"
  }
}
  • text — The callout text
  • style — highlight | warning | info | quote

Image

Raster image with layout variants (contained, fullbleed, caption, side-by-side).

Use cases: Logo, screenshot, AI-generated hero image, photo.

Show spec example
{
  "component": "image",
  "params": {
    "src": "https://example.com/image.png",
    "alt": "Product screenshot",
    "style": "caption",
    "caption": "Dashboard as of 2026-04"
  }
}
  • src | asset_id — URL or previously uploaded asset ID
  • style — contained | fullbleed | caption | sidebyside | bannercard

Composition — nested layouts

SplitView and Card containers accept nested {component, params} objects in their cells. This lets you build complex dashboards from primitives without writing a new component:

{
  "component": "split_view",
  "params": {
    "left":  {
      "component": "metric",
      "params": {"metrics": [{"value": "$12.4M", "label": "Revenue"}]}
    },
    "right": {
      "component": "bar_list",
      "params": {"rows": [
        {"label": "Enterprise", "value": 6.2},
        {"label": "Mid-market", "value": 4.8},
        {"label": "SMB", "value": 1.4}
      ]}
    }
  }
}

Rules (as of v3):

  • Max depth 2 — a SplitView can hold a Card that holds a Metric, but no deeper.
  • Allowlist — most components compose; Gantt, Swimlane, Timeline, Roadmap, OrgChart, ThreeHorizons, Testimonial do NOT compose (they own the full slide).
  • Error codes: composition_not_supported, nesting_too_deep, nested_params_invalid.

See the composition deep-dive for the full pattern with 3 canonical examples.

Frequently asked questions

Can I add my own component?

Not yet as user-contributed Python — the component library is currently maintained by the slideforge.dev team. You can achieve most custom layouts via the composition pattern (nesting existing components in SplitView/Card) or the mode="code" sandbox where you write python-pptx code directly against our helper library. Custom-component contributions are on the v4 roadmap.

How do I discover components programmatically?

Call search_catalog(type="components") via MCP or GET /v1/componentsvia REST. Both return JSON with each component's name, aliases, parameter schema, example params, and a rendered preview URL. Agents use this to pick the right component for a user brief without hardcoding the catalog.

Are components editable in PowerPoint after download?

Yes. Every component renders as native PowerPoint shapes — text boxes, rectangles, lines, picture frames. Change a color, rewrite a value, drag a bar — it all works. This is fundamentally different from consumer tools that export as images or HTML.

What happens if my brief doesn't match any component?

The auto-routing engine falls back to creative AI generation — a Pro model writes custom python-pptx code that produces a bespoke layout, passes it through visual QA, and auto-iterates if the quality score is below 8. Cost: $0.20/slide, ~30s. The output still lands as editable .pptx shapes.

Are all 35 components available in the free tier?

Yes. The $3 free credit on signup covers every component. There's no tier-gating — all components, composition, and themes are available from the first call. Pricing is pure pay-per-slide ($0.03 template, $0.05 spec, $0.20 creative AI).

Can I style components to match my brand?

Yes — upload a corporate .pptx template via /v1/themes and every component inherits its colors, fonts, and slide masters. Or define a theme JSON explicitly. See Custom Themes guide for details.

Pick a component, try it in under a minute.

$3 free credit covers ~100 template renders or ~15 creative AI slides. No subscription.

Open PPTX generatorConnect via MCPAPI docs

Canonical: slideforge.dev/guides/slideforge-component-reference. Published by Smart Data Brokers GmbH, Zurich. Not affiliated with slideforge.io, slideforge.fr, or unrelated GitHub repositories of the same name.