## Commit Graph (S—272)

A git history lane graph: branches as lanes, merge curves, click a commit for its details, and filter to one branch.

- URL: https://sundaeui.dev/components/commit-graph
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/commit-graph.json`
- Tags: devtools, graph, commits, history, git, branches

Commits sit on lanes drawn in SVG; merges curve from one lane into another. Selecting a commit opens a short detail with author, time, hash and a copy button.
The branch filter dims commits that are not reachable from the chosen branch rather than hiding them, so the shape stays readable.

### Usage

```tsx
import { CommitGraph } from '@/components/sundae/commit-graph'

<CommitGraph />
```

### Props

- `commits` (`{ id: string; msg: string; lane: number; parents: string[]; author: string; when: string; branch?: string }[]`, required): Newest first.
- `onSelect` (`(id: string) => void`): Called on selection.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Repo browsers, deploy history, code review context.

### When not to use

- Hundreds of commits: virtualise the list.

### Accessibility

- The list is a listbox of commits; arrow keys move the selection.
- Lanes are decorative; branch and merge info is in each option label.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Move between commits