Primitive: <GitGraphGutter>

Renders just the lane SVG (nodes + edges) — no table, no headlines, no virtualization. Use it when you want the DAG visual but want to drive the row layout yourself.

Basic use

import GitGraphGutter from "@/components/git-graph/git-graph-gutter";
import { computeLayout } from "@/components/git-graph/lib/layout";

const layout = computeLayout(commits);

return (
  <GitGraphGutter
    layout={layout}
    rowHeight={40}
    laneWidth={16}
    nodeRadius={5}
    strokeWidth={1.5}
  />
);

Windowed rendering

Pass a range to render only edges and nodes touching [fromRow, toRow]. This is how the headline component virtualizes.

<GitGraphGutter
  layout={layout}
  rowHeight={40}
  range={{ fromRow: 100, toRow: 150 }}
/>

Why a separate primitive?

Some consumers want column layouts the headline table doesn't support (custom widths, extra columns, sticky headers). Splitting the gutter out keeps the lane geometry usable without inheriting the table's layout opinions.