GitGraph

The commit history with branch lines drawn in SVG, refs as badges, authors, dates and short hashes. Pick it for a history view where people pick a commit to inspect.

GitGraph
RefBadge

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, GitGraph

mainorigin/mainMerge branch feature/quick-openAda Lovelace12 min ago9f2c1e7

feature/quick-openRank exact file names above fuzzy hitsGrace Hopper1 h ago7c3a9e1

Fix the focus ring of the sidebar in forced coloursAlan Turing2 h ago4b81d0c

Add fuzzy matching to quick openGrace Hopper3 h agoe1d4f0a

v0.4.0Release 0.4.0Ada Lovelaceyesterday2a90b7f

Start the project with a subject long enough to show how the row cuts it on a narrow screenAda Lovelacelast weekc55e8a1

Selected 9f2c1e7: Merge branch feature/quick-open

Dark theme, GitGraph

mainorigin/mainMerge branch feature/quick-openAda Lovelace12 min ago9f2c1e7

feature/quick-openRank exact file names above fuzzy hitsGrace Hopper1 h ago7c3a9e1

Fix the focus ring of the sidebar in forced coloursAlan Turing2 h ago4b81d0c

Add fuzzy matching to quick openGrace Hopper3 h agoe1d4f0a

v0.4.0Release 0.4.0Ada Lovelaceyesterday2a90b7f

Start the project with a subject long enough to show how the row cuts it on a narrow screenAda Lovelacelast weekc55e8a1

Selected 9f2c1e7: Merge branch feature/quick-open

High contrast theme, GitGraph

mainorigin/mainMerge branch feature/quick-openAda Lovelace12 min ago9f2c1e7

feature/quick-openRank exact file names above fuzzy hitsGrace Hopper1 h ago7c3a9e1

Fix the focus ring of the sidebar in forced coloursAlan Turing2 h ago4b81d0c

Add fuzzy matching to quick openGrace Hopper3 h agoe1d4f0a

v0.4.0Release 0.4.0Ada Lovelaceyesterday2a90b7f

Start the project with a subject long enough to show how the row cuts it on a narrow screenAda Lovelacelast weekc55e8a1

Selected 9f2c1e7: Merge branch feature/quick-open

UsageLink to the section Usage

tsx

import { GitGraph, RefBadge } from '@skribly/ui/code'

tsx

<GitGraph label={t('history.title')} commits={log} selectedHash={selected?.hash}
  onSelect={setSelected} mergeLabel={t('history.merge')} refKindLabels={{ tag: t('git.tag') }} />

<RefBadge kind="tag" kindLabel={t('git.tag')}>v0.4.0</RefBadge>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A single-select grid: arrow keys move, Enter or Space selects, typing jumps to a subject.
Lines are decoration and hidden; merges are read as a word and drawn as a hollow dot.
Ref kinds differ by glyph as well as colour, and their kind can be read before the name.
The lines stretch with the row, so they stay joined at 200% text size, and turn to the text colour in forced colours.

This demo runs through axe in all three themes on every test run. See what the tests check.