184 Components
Interactive Git Graph
CardsVisual SVG Git commit tree illustrating multi-branch workflows with animated bezier curves, branch lane filtering, interactive commit nodes, and SHA copying.
Interactive Git Commit Tree
chore: release boseui v1.0.0 core catalogRishabh Bose • 1 day ago
main8a1f9e2
feat: add o1 reasoning accordion & token gaugeRishabh Bose • 18 hours ago
feature/ai-agents4b2e8c1
fix(api): patch origin headers in registry proxyDev Team • 12 hours ago
hotfix/cors7d9c0a4
merge: pull request #42 from hotfix/corsRishabh Bose • 6 hours ago
main9f3a1d8
feat(voice): implement Canvas 2D voice mesh orbRishabh Bose • 2 hours ago
feature/ai-agentse2c8a14
merge: pull request #48 from feature/ai-agentsRishabh Bose • Just now
mainf1a9b03
#f1a9b03"merge: pull request #48 from feature/ai-agents"
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/interactive-git-graph.json"
Props
TypeScript props supported by <InteractiveGitGraph />.
| Prop | Type | Default | Description |
|---|---|---|---|
| commits | GitGraphCommit[] | — | Array of commit items with sha, branch, message, author, and lane. |
| defaultSelectedSha | string | — | Initial commit SHA selected in the tree. |
| onSelectCommit | (commit: GitGraphCommit) => void | — | Callback when a commit node or row is clicked. |
Key Features
- Smooth SVG Bezier curved tracks illustrating branch splits and merges.
- Clickable commit nodes with pulsating selected HEAD indicator.
- Branch filter chips to isolate main, feature, or hotfix tracks.
- Integrated commit inspector with one-click SHA copying.
- Full responsive dark/light mode palette with accessible contrast.
Keyboard & Accessibility
- Keyboard accessible commit list items.
- Clear visual focus and active selection highlights.