Docs

IntroductionUsageTroubleshooting

Examples

Chatbotv0 cloneWorkflow

Components

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