Reference

Layout components

section, columns, divider, timeline, steps, progress_bar, empty_state

section

Grouping with a heading

A titled block of nested components. Use it to organize long pages into scannable chunks. eyebrow + heading optional. Nested components: can hold any components. Add align: center | right to align the eyebrow, heading, and text content within the section.

Anchors. When heading is set, the rendered <section> gets an auto-slugged id (lowercase, hyphens, punctuation and emoji stripped), so deep-links like /guide.html#platform-health just work. Set id: stable-name to lock the anchor even if the heading wording changes. Same behavior applies to header.

Example section

Platform health

Uptime

99.9%

Errors

0.02%

Latency p95

140ms

Everything above lives inside this section.

- type: section
  eyebrow: Example section
  heading: Platform health
  components:
    - type: stat_grid
      stats: [...]
    - type: markdown
      body: "Everything above lives inside this section."

columns

Multi-column row

Distribute components into equal-width columns. Each column is itself a list of components.

Default — columns stretch at the grid level, contents sit at natural height:

Left

Arbitrary components live inside each column.

Center

Even widths, responsive collapse on narrow screens. One more line here so heights diverge.

Right

Great for comparison layouts. Extra line here. And another.

equal_heights: true — children grow to fill their column so all three look balanced:

Left

Arbitrary components live inside each column.

Center

Even widths, responsive collapse on narrow screens. One more line here so heights diverge.

Right

Great for comparison layouts. Extra line here. And another.

- type: columns
  equal_heights: true    # default false
  columns:
    - - type: callout
        variant: info
        title: Left
        body: Left content
    - - type: callout
        variant: success
        title: Center
        body: Center content

timeline

Horizontal phase tracker

A horizontal row of phases with status indicators. Each item is completed, active, or upcoming. No interaction — purely visual progress.

Planning

Configuration

Optimization

Ongoing

- type: timeline
  items:
    - name: Planning
      status: completed    # completed | active | upcoming
    - name: Configuration
      status: completed
    - name: Optimization
      status: active
    - name: Ongoing
      status: upcoming

event_timeline

Vertical event history with severity filter

Vertical chronology with date, severity badge, and optional source/link per event. Each event collapses into a <details> body when a summary is provided. With show_filter_toggle: true a Major-only / All toggle appears at the top — useful for noisy histories where the reader wants the big picture first.

2026-04-27majorgranola↗
Weekly sync — Jira asset model confirmed
Working session booked Tuesday 3 PM CT. Two automation rules: create-new + append-to-existing.
2026-04-27minorlinear↗
ANSYS-322 → Done
2026-04-25majorportal
First production run — 76.5% noise reduction
2,316 investigations across the EKS cluster. High-severity findings dropped from 3,000 to 222.
2026-04-22infocalendar
Cadence moved to Thursdays at 1 PM CT
2026-04-20minorslack
GitHub app installed for the org

- type: event_timeline
  default_filter: major     # major | all (default: all)
  show_filter_toggle: true  # default: false
  events:
    - date: 2026-04-27
      severity: major       # major | minor | info (default: minor)
      title: "Weekly sync — Jira asset model confirmed"
      summary: |
        Working session booked Tuesday 3 PM CT.
      source: granola
      link: https://example.com/notes
    - date: 2026-04-27
      severity: minor
      title: "ANSYS-322 → Done"
      source: linear
      link: https://example.com/issue

tree

Nested status tree

Recursive nested list with per-node status (completed / active / blocked / upcoming / default). Each node renders a status glyph + label, an optional inline note, and any number of children. The optional filter toggle lets the reader cut the view to Incomplete only (hides completed nodes) or Blocked only (shows blocked nodes plus their ancestor chain so the path-to-root keeps context).

Phase 1 — Planning
- Identify stakeholders
- Determine deployment method (CFN or Terraform)
- Identify scanner integrations
Phase 2 — Initial Configuration
- Generate External ID
- Deploy Maze stackWaiting on production change-window approval
- Connect vulnerability scanner
- Add initial admin users
Phase 3 — Review and Validate

- type: tree
  default_filter: all          # all (default) | incomplete | blocked
  show_filter_toggle: true     # default: false
  nodes:
    - label: "Phase 1 — Planning"
      status: completed       # default | completed | active | blocked | upcoming
      children:
        - label: Identify stakeholders
          status: completed
        - label: Deploy Maze stack
          status: blocked
          note: "Waiting on change-window approval"

venn

Two- or three-set venn (inline SVG)

Native inline SVG — no JS, no charting library. Two-set or three-set diagrams supported; per-set color flows through the same color: field as cards/badges. Optional overlaps: adds intersection labels at the centroid of the involved circles. Renders crisp at any size and inherits theme tokens, so a light/dark theme swap just works.

Two-set

Three-set

- type: venn
  title: "Team overlap"
  sets:
    - label: Frontend
      color: teal       # default | green | yellow | red | teal
    - label: Backend
      color: red
  overlaps:
    - sets: [0, 1]      # indices into sets[]
      label: APIs

steps

Numbered or bulleted steps

Ordered list of cards with title + optional detail. Numbered by default; set numbered: false for bullets.

1
Install the binary
Build from source with cargo build --release.
2
Create a site directory
Any directory of .yaml files — kazam walks it recursively.
3
Run dev mode
kazam dev ./my-site watches and live-reloads at localhost:3000.

- type: steps
  numbered: true   # default; false for bullets
  items:
    - title: Install the binary
      detail: Build from source with cargo build --release.
    - title: Create a site directory
      detail: Any directory of .yaml files.
    - title: Run dev mode
      detail: kazam dev ./my-site

empty_state

Zero-data placeholder

For pages or sections that have nothing to show yet. Icon, title, description, optional CTA. Any bundled lucide icon name works in the icon: field.

No customers yet

Add your first customer to see them here with health badges, deployment guides, and meeting agendas.

Add customer

All caught up

Zero open issues in this portfolio.

- type: empty_state
  title: No customers yet
  body: Add your first customer to see them here.
  icon: inbox                 # any bundled lucide icon
  action:
    label: Add customer
    href: /customers/new

Next up

Navigation components thread pages together — breadcrumbs on deep pages, button groups for primary CTAs.

Navigation All components