GitCommit
git-commitShows a branch, short hash, commit message, and author in inline or stacked form.
Usage
Basic usage
Branch chip + short hash + commit message, inline single line typesetting.
<GitCommit
branch="master"
sha="10577b9aaaa"
message="fix(www): ai-chat deployment station is not responding"
/>Two-line typesetting
layout="stacked" The information is at the top and the reference is at the bottom. Table/list cells are just needed.
<GitCommit
layout="stacked"
branch="master"
sha="36e347faaa"
message="feat(www): Global routing progress bar"
author="Hulian"
avatar={<Avatar>Hu</Avatar>}
/>Clickable short hash
Pass href to make the short hash jump to commit details, shaLength controls the number of bits.
<>
<GitCommit branch="release" sha="cb2ae42ddd0099" href="#cb2ae42" message="chore(release): @hulianui/ui@0.1.2" />
<GitCommit branch="hotfix" sha="f79cbb812345" shaLength={12} message="Hair Border token" />
</>Small size · Quote only
size="sm" Compact; omitting message only renders the branch + hash reference.
<>
<GitCommit size="sm" branch="master" sha="10577b9000" author="Hulian" avatar={<Avatar>Hu</Avatar>} />
<GitCommit size="sm" branch="feat/x" sha="abcdef0123" />
</>When to use
Use GitCommit in deployment, pull-request, or activity lists to show a branch, short SHA, message, and author. Use DiffStat or DeployStatus for build lifecycle details, or Timeline for a chronological event collection.
Import
import { GitCommit, shortSha, branchTone, type BranchTone } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| sha* | string | — | Full or short commit SHA, truncated to shaLength. |
| branch | string | — | Branch name shown in a leading chip. |
| author | string | — | Author name. |
| href | string | — | Link destination for the short SHA. |
| shaLength | number | 7 | Displayed SHA length. |
| colorBranch | boolean | true | Assigns a stable soft color by branch name. |
| layout | "inline" | "stacked" | "inline" | Single-line or two-line layout for lists and table cells. |
| size | "sm" | "md" | "md" | Component size. |
| className | string | — | Custom class name. |
Slots
| Slot | Type | Description |
|---|---|---|
| message | ReactNode | Single-line truncated commit subject; the primary row in stacked mode. |
| avatar | ReactNode | Author image such as <Avatar />, without a hard dependency. |
Pitfalls
shortSha and branchTone are exported pure helpers for reuse and testing outside the component.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<GitCommit
branch="master"
sha={deploy.sha}
message={deploy.message}
/>