Quickstart

Pass an array of Commit objects to <GitGraph>. The component renders a virtualized table with a DAG gutter, headline metadata, and ref badges.

import GitGraph from "@/components/git-graph/git-graph";
import "@/components/git-graph/git-graph.css";
import type { Commit } from "@/components/git-graph/types";

const commits: Commit[] = [
  { sha: "a", parents: [], author: { name: "you" }, message: "init", timestamp: 1714166400 },
  { sha: "b", parents: ["a"], author: { name: "you" }, message: "feat", timestamp: 1714252800 },
  // ...
];

export default function Page() {
  return <GitGraph commits={commits} onCommitClick={(c) => console.log(c.sha)} />;
}

Live

Common props

commits — required Commit[]
head — sha of HEAD; the corresponding row gets a HEAD indicator
onCommitClick — fires on row click
onCommitHover — fires on row hover (and with null on leave)
showWorkingTreeRow — adds a synthetic top row representing uncommitted work