vercel__ai-elements/apps/docs/content/components/(code)/commit.mdx

---
title: Commit
description: Display commit information with hash, message, author, and file changes.
path: elements/components/commit
---

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

<Preview path="commit" />

## Installation

<ElementsInstaller path="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

| Status     | Label | Color  |
| ---------- | ----- | ------ |
| `added`    | A     | Green  |
| `modified` | M     | Yellow |
| `deleted`  | D     | Red    |
| `renamed`  | R     | Blue   |

## Props

### `<Commit />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the Collapsible component.",
      type: "React.ComponentProps<typeof Collapsible>",
    },
  }}
/>

### `<CommitHeader />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the CollapsibleTrigger component.",
      type: "React.ComponentProps<typeof CollapsibleTrigger>",
    },
  }}
/>

### `<CommitAuthor />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the container div.",
      type: "React.HTMLAttributes<HTMLDivElement>",
    },
  }}
/>

### `<CommitAuthorAvatar />`

<TypeTable
  type={{
    initials: {
      description: "Author initials to display.",
      type: "string",
      required: true,
    },
    "...props": {
      description: "Spread to the Avatar component.",
      type: "React.ComponentProps<typeof Avatar>",
    },
  }}
/>

### `<CommitInfo />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the container div.",
      type: "React.HTMLAttributes<HTMLDivElement>",
    },
  }}
/>

### `<CommitMessage />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the span element.",
      type: "React.HTMLAttributes<HTMLSpanElement>",
    },
  }}
/>

### `<CommitMetadata />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the container div.",
      type: "React.HTMLAttributes<HTMLDivElement>",
    },
  }}
/>

### `<CommitHash />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the span element.",
      type: "React.HTMLAttributes<HTMLSpanElement>",
    },
  }}
/>

### `<CommitSeparator />`

<TypeTable
  type={{
    children: {
      description: "Custom separator content.",
      type: "React.ReactNode",
      default: '"•"',
    },
    "...props": {
      description: "Spread to the span element.",
      type: "React.HTMLAttributes<HTMLSpanElement>",
    },
  }}
/>

### `<CommitTimestamp />`

<TypeTable
  type={{
    date: {
      description: "Commit date.",
      type: "Date",
      required: true,
    },
    children: {
      description: "Custom timestamp content. Defaults to relative time.",
      type: "React.ReactNode",
    },
    "...props": {
      description: "Spread to the time element.",
      type: "React.HTMLAttributes<HTMLTimeElement>",
    },
  }}
/>

### `<CommitActions />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the container div.",
      type: "React.HTMLAttributes<HTMLDivElement>",
    },
  }}
/>

### `<CommitCopyButton />`

<TypeTable
  type={{
    hash: {
      description: "Commit hash to copy.",
      type: "string",
      required: true,
    },
    onCopy: {
      description: "Callback after successful copy.",
      type: "() => void",
    },
    onError: {
      description: "Callback if copying fails.",
      type: "(error: Error) => void",
    },
    timeout: {
      description: "Duration to show copied state (ms).",
      type: "number",
      default: "2000",
    },
    "...props": {
      description: "Spread to the Button component.",
      type: "React.ComponentProps<typeof Button>",
    },
  }}
/>

### `<CommitContent />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the CollapsibleContent component.",
      type: "React.ComponentProps<typeof CollapsibleContent>",
    },
  }}
/>

### `<CommitFiles />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the container div.",
      type: "React.HTMLAttributes<HTMLDivElement>",
    },
  }}
/>

### `<CommitFile />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the row div.",
      type: "React.HTMLAttributes<HTMLDivElement>",
    },
  }}
/>

### `<CommitFileInfo />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the container div.",
      type: "React.HTMLAttributes<HTMLDivElement>",
    },
  }}
/>

### `<CommitFileStatus />`

<TypeTable
  type={{
    status: {
      description: "File change status.",
      type: '"added" | "modified" | "deleted" | "renamed"',
      required: true,
    },
    children: {
      description: "Custom status label.",
      type: "React.ReactNode",
    },
    "...props": {
      description: "Spread to the span element.",
      type: "React.HTMLAttributes<HTMLSpanElement>",
    },
  }}
/>

### `<CommitFileIcon />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the FileIcon component.",
      type: "React.ComponentProps<typeof FileIcon>",
    },
  }}
/>

### `<CommitFilePath />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the span element.",
      type: "React.HTMLAttributes<HTMLSpanElement>",
    },
  }}
/>

### `<CommitFileChanges />`

<TypeTable
  type={{
    "...props": {
      description: "Spread to the container div.",
      type: "React.HTMLAttributes<HTMLDivElement>",
    },
  }}
/>

### `<CommitFileAdditions />`

<TypeTable
  type={{
    count: {
      description: "Number of lines added.",
      type: "number",
      required: true,
    },
    "...props": {
      description: "Spread to the span element.",
      type: "React.HTMLAttributes<HTMLSpanElement>",
    },
  }}
/>

### `<CommitFileDeletions />`

<TypeTable
  type={{
    count: {
      description: "Number of lines deleted.",
      type: "number",
      required: true,
    },
    "...props": {
      description: "Spread to the span element.",
      type: "React.HTMLAttributes<HTMLSpanElement>",
    },
  }}
/>