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

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

See scripts/commit.tsx for this example.

npx ai-elements@latest add commit

• 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

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

Prop	Type	Default	Description
...props	React.ComponentProps<typeof Collapsible>	-	Spread to the Collapsible component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CollapsibleTrigger>	-	Spread to the CollapsibleTrigger component.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the container div.

Prop	Type	Default	Description
initials	string	Required	Author initials to display.
...props	React.ComponentProps<typeof Avatar>	-	Spread to the Avatar component.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the container div.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLSpanElement>	-	Spread to the span element.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the container div.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLSpanElement>	-	Spread to the span element.

Prop	Type	Default	Description
children	React.ReactNode	-	Custom separator content.
...props	React.HTMLAttributes<HTMLSpanElement>	-	Spread to the span element.

Prop	Type	Default	Description
date	Date	Required	Commit date.
children	React.ReactNode	-	Custom timestamp content. Defaults to relative time.
...props	React.HTMLAttributes<HTMLTimeElement>	-	Spread to the time element.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the container div.

Prop	Type	Default	Description
hash	string	Required	Commit hash to copy.
onCopy	() => void	-	Callback after successful copy.
onError	(error: Error) => void	-	Callback if copying fails.
timeout	number	2000	Duration to show copied state (ms).
...props	React.ComponentProps<typeof Button>	-	Spread to the Button component.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof CollapsibleContent>	-	Spread to the CollapsibleContent component.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the container div.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the row div.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the container div.

Prop	Type	Default	Description
status	unknown	Required	File change status.
children	React.ReactNode	-	Custom status label.
...props	React.HTMLAttributes<HTMLSpanElement>	-	Spread to the span element.

Prop	Type	Default	Description
...props	React.ComponentProps<typeof FileIcon>	-	Spread to the FileIcon component.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLSpanElement>	-	Spread to the span element.

Prop	Type	Default	Description
...props	React.HTMLAttributes<HTMLDivElement>	-	Spread to the container div.

Prop	Type	Default	Description
count	number	Required	Number of lines added.
...props	React.HTMLAttributes<HTMLSpanElement>	-	Spread to the span element.

Prop	Type	Default	Description
count	number	Required	Number of lines deleted.
...props	React.HTMLAttributes<HTMLSpanElement>	-	Spread to the span element.