Commit

Display commit information with hash, message, author, and file changes.

The Commit component displays commit details including hash, message, author, timestamp, and changed files.

Installation

npx ai-elements@latest add commit

Features

  • Commit hash display with copy button
  • Author avatar with initials
  • Relative timestamp formatting
  • Collapsible file changes list
  • Color-coded file status (added/modified/deleted/renamed)
  • Line additions/deletions count

File Status

StatusLabelColor
addedAGreen
modifiedMYellow
deletedDRed
renamedRBlue

Props

<Commit />

Prop

Type

<CommitHeader />

Prop

Type

<CommitAuthor />

Prop

Type

<CommitAuthorAvatar />

Prop

Type

<CommitInfo />

Prop

Type

<CommitMessage />

Prop

Type

<CommitMetadata />

Prop

Type

<CommitHash />

Prop

Type

<CommitSeparator />

Prop

Type

<CommitTimestamp />

Prop

Type

<CommitActions />

Prop

Type

<CommitCopyButton />

Prop

Type

<CommitContent />

Prop

Type

<CommitFiles />

Prop

Type

<CommitFile />

Prop

Type

<CommitFileInfo />

Prop

Type

<CommitFileStatus />

Prop

Type

<CommitFileIcon />

Prop

Type

<CommitFilePath />

Prop

Type

<CommitFileChanges />

Prop

Type

<CommitFileAdditions />

Prop

Type

<CommitFileDeletions />

Prop

Type