Reference

Interactive components

table, tabs, accordion, call_log, sequence

table

Sortable, filterable tables

Client-side sortable (per-column) and filterable (row-level text search). sortable: true on a column enables the click-to-sort affordance; filterable: true on the table adds a search box above.

Rows are a list of maps keyed by column key. Sort tries numeric parsing first (stripping $, %, ,) then falls back to string compare.

CustomerACVStageClose date
Acme Corp$480,000Closed Won2026-04-15
Beta Corp$120,000Negotiation2026-05-30
Gamma Inc$850,000Discovery2026-07-10
Delta Labs$45,000Closed Won2026-03-01
- type: table
  filterable: true
  columns:
    - key: customer
      label: Customer
      sortable: true
    - key: acv
      label: ACV
      sortable: true
      align: right     # left | right | center
  rows:
    - customer: Acme Corp
      acv: $480,000
    - customer: Beta Corp
      acv: $120,000
tabs

Tabbed panels

Progressive disclosure. Tab labels as buttons, panels below. First tab shows by default. Each tab's components: can contain anything - including nested tabs or accordions.

High-level pitch lives here.

Built in
1 day
Lines of code
~2,200

Yes - any component, including accordions like this one.

Also supported, but usually a sign you should split pages.

- type: tabs
  tabs:
    - label: Summary
      components:
        - type: markdown
          body: "High-level pitch lives here."
    - label: Details
      components:
        - type: stat_grid
          stats: [...]
sequence

Guided walkthrough of another component

A strip of steps that points at a target component by id. Each step lists the ids to bring forward; everything else with an id inside the target dims, and a box that contains a highlighted cell stays clear so it reads as context. Arrow keys or [ / ] step when the strip has focus, Escape or Show all clears it. Validation errors when target or any highlight id is not an explicit id: on this page. Hidden in print and export.

Ingest

Read the source at one commit.

Match

Candidates from rules and advisories.

Decide

An agent reads the path and rules.

1 / 3

Ingest. One commit, one SBOM.

- type: grid
  id: seq-demo
  columns: 3
  children:
    - component: { type: box, id: seq-a, title: Ingest, body: "..." }
    - component: { type: box, id: seq-b, title: Match, body: "..." }
- type: sequence
  target: seq-demo
  steps:
    - highlight: [seq-a]
      note: "**Ingest.** One commit, one SBOM."
    - highlight: [seq-b]
      note: "**Match.** Recall first."
accordion

Collapsible sections

Click-to-expand sections. All closed by default. Each item contains any components.

Open an issue or add it - each component is ~30 lines of Rust plus CSS. See src/render/components.rs for the pattern.

Yes - pick dark or light as the base via the theme: key in kazam.yaml, and override any individual token with a colors: map. See the Theming section of the guide.

Yes - kazam build produces plain HTML files. Open them directly with file:// URLs. Nav and interactive components all work locally.

- type: accordion
  items:
    - title: Question 1
      components:
        - type: markdown
          body: Answer content.
    - title: Question 2
      components:
        - type: markdown
          body: Answer content.
call_log

Customer call history

One bordered card per call, newest first (sorted by date, whatever the YAML order). Each card is a head row with the date, title and an optional one-line summary; click it to open that call's agenda and notes. One card is open at a time. Only the first limit (default 5) show, then "Show N more" reveals the next limit. A call with no components is a plain row. #call-<date> in the URL opens that call (-2, -3 for same-date duplicates). No items shows "No calls yet."

- type: call_log
  limit: 5                      # optional, default 5
  items:
    - date: "2026-11-04"        # required, YYYY-MM-DD
      title: Path to production # required
      summary: One line         # optional
      components:               # optional; agenda + notes
        - type: markdown
          body: Notes.
Next up

Layout components are the skeleton every page hangs on - sections, columns, dividers, timelines, steps.

LayoutAll components