Reference

Interactive components

table, tabs, accordion, 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.

Customer	ACV	Stage	Close date
Acme Corp	$480,000	Closed Won	2026-04-15
Beta Corp	$120,000	Negotiation	2026-05-30
Gamma Inc	$850,000	Discovery	2026-07-10
Delta Labs	$45,000	Closed Won	2026-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

Can tabs contain other components?

Yes - any component, including accordions like this one.

What about nested tabs?

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.

What if I need a component that doesn't exist yet?

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

Can I theme the colors?

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.

Does it work without a server?

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.

Next up

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

Layout All components