Components

35 design system components for building slides declaratively. Compose them in a CSS Flexbox spec and render with POST /v1/render/spec. Deterministic, <1s, $0.05 per slide. No LLM needed.

The full component library rendered at 512px preview size. Click through below for per-category schemas and examples.

Component Categories

metrics (3)

Metric, StatCard, UnitEconomics

charts (8)

BarList, BurndownChart, CapTable, Funnel, Heatmap, LineTrend, StackedBar, Waterfall

content (5)

Callout, Hero, Image, List, Testimonial

diagrams (8)

MaturityModel, OrgChart, Pyramid, Quadrant, Radial, Steps, ThreeHorizons, Timeline

layouts (5)

Card, ComparisonTable, IconGrid, SplitView, Table

process (4)

ArrowFlow, Gantt, Roadmap, Swimlane

status (2)

RAGScorecard, Tracker

v3Composition

SplitView's left / right and Card's cards[] accept nested {component, params} panels — build exec dashboards, pricing tables, feature announcements from primitives. Max nesting depth 2. 26 components safe to nest; Gantt, Swimlane, Timeline, Roadmap, OrgChart, ThreeHorizons, Testimonial are banned as nested children.

Read the composition guide →

GET /v1/components

List all components. Each includes name, description, category, param schema, and example spec. Filter by category.

curl

# List all components
curl https://api.slideforge.dev/v1/components \
  -H "Authorization: Bearer sf_live_YOUR_KEY"

# Filter by category
curl "https://api.slideforge.dev/v1/components?category=charts" \
  -H "Authorization: Bearer sf_live_YOUR_KEY"

POST /v1/components/search

Semantic search for the best component for your content. Returns ranked matches with schemas and example specs.

curl

# Semantic search for components
curl -X POST https://api.slideforge.dev/v1/templates/search \
  -H "Authorization: Bearer sf_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{"query": "project status with red amber green indicators"}'

Workflow: components → spec → render

Browse or search components to find the right building blocks
Compose a spec using CSS Flexbox layout (direction, gap, flex)
Render with POST /v1/render/spec

Or use POST /v1/suggest-layout to have the LLM generate a spec from a natural language brief — then modify and render.

Example: compose and render

# Compose a spec using components, then render
curl -X POST https://api.slideforge.dev/v1/render/spec \
  -H "Authorization: Bearer sf_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "spec": {
      "chrome": {"title": "Q1 Dashboard"},
      "body": {
        "display": "flex",
        "direction": "column",
        "gap": 20,
        "children": [
          {"component": "Metric", "params": {"metrics": [
            {"value": "$3.2M", "label": "ARR", "trend": "+22%", "trend_dir": "up"}
          ]}},
          {"component": "BarList", "params": {"items": [
            {"name": "Enterprise", "value": 64},
            {"name": "Mid-Market", "value": 28}
          ]}}
        ]
      }
    }
  }'