Commit for Radix UI

A commit shows up as one card: the message, the short hash, who made it and when. The files it changed open below, each with a letter for what happened to it and its line counts.

Use it when a coding agent commits during a chat, so the reader can see what changed without opening git. One edited file reads better as a Trace line, and the diff itself belongs in a Code Block. In React, Radix UI draws the card; the commit's data comes from you.

Installation

Anatomy

Commit
├── CommitHeader
│   ├── CommitAuthor
│   │   └── CommitAuthorAvatar
│   ├── CommitInfo
│   │   ├── CommitMessage
│   │   └── CommitMetadata
│   │       ├── CommitHash
│   │       ├── CommitSeparator
│   │       └── CommitTimestamp
│   └── CommitActions
│       └── CommitCopyButton
└── CommitContent
    └── CommitFiles
        └── CommitFile
            ├── CommitFileInfo
            │   ├── CommitFileStatus
            │   ├── CommitFileIcon
            │   └── CommitFilePath
            └── CommitFileChanges
                ├── CommitFileAdditions
                └── CommitFileDeletions

CommitHeader puts an invisible button over the whole row: a click anywhere on it opens the file list, and CommitActions sits above that button, so the copy button still takes its own click.

Usage

import {
  Commit, CommitActions, CommitContent, CommitCopyButton, CommitFile,
  CommitFileAdditions, CommitFileChanges, CommitFileDeletions,
  CommitFileIcon, CommitFileInfo, CommitFilePath, CommitFiles,
  CommitFileStatus, CommitHash, CommitHeader, CommitInfo, CommitMessage,
  CommitMetadata, CommitSeparator, CommitTimestamp,
} from "@/components/ui/commit";

<Commit>
  <CommitHeader>
    <CommitInfo>
      <CommitMessage>Add user authentication flow</CommitMessage>
      <CommitMetadata>
        <CommitHash>a1b2c3d</CommitHash>
        <CommitSeparator />
        <CommitTimestamp date={new Date("2026-10-21T14:30:00Z")} />
      </CommitMetadata>
    </CommitInfo>
    <CommitActions>
      <CommitCopyButton hash="a1b2c3d4e5f6" />
    </CommitActions>
  </CommitHeader>
  <CommitContent>
    <CommitFiles>
      <CommitFile>
        <CommitFileInfo>
          <CommitFileStatus status="added" />
          <CommitFileIcon />
          <CommitFilePath>src/auth/login.tsx</CommitFilePath>
        </CommitFileInfo>
        <CommitFileChanges>
          <CommitFileAdditions count={45} />
          <CommitFileDeletions count={0} />
        </CommitFileChanges>
      </CommitFile>
    </CommitFiles>
  </CommitContent>
</Commit>

Demos

File statuses

The four values of status on CommitFileStatus, one file each: added in green, modified in amber, deleted in red and renamed in blue, each with its letter and the word for screen readers. A count of 0 renders nothing, so the renamed file shows no line counts. The colors come from the theme's status tokens, so they follow light and dark like the Badge does.

Author

CommitAuthor with a CommitAuthorAvatar at the start of the header: one with a picture in src, one with only its initials. Put the name in CommitMetadata beside the hash. Show the author when people and agents commit to the same branch; when the agent made every commit, the avatar is noise.

History

Three commits from one task, newest first, each closed until you open it. The metadata counts the files, so the reader knows how much is inside before opening it. Use a column of cards for a short run of commits; a long log needs a list of its own.

Copy

CommitCopyButton copies the full hash in hash while the header shows seven characters. onCopy runs once it's on the clipboard, onError when the browser refuses, and timeout sets how long the check stays, 1.5 seconds here. The button also announces Copied to screen readers.

AI SDK

Give the agent a tool that commits and returns the commit, gitCommit in this example: its hash, message, date and changed files, from git show --numstat. Render a Commit for each call whose output has arrived.

const commits = message.parts
  .filter((part) => part.type === "tool-gitCommit")
  .filter((part) => part.state === "output-available")
  .map((part) => part.output);

Each output maps onto the parts:

Migrating from AI SDK Elements

If you added Commit from AI SDK Elements (opens in a new tab), your project has a components/ai-elements/commit.tsx. Install ours with the command above and import from @/components/ui/commit instead: every part keeps its name and props, so the code that uses it keeps working. What changes:

• CommitHeader is a row with a trigger button laid over it, so the copy button is no longer a button inside a button. label names that trigger for screen readers (Changed files by default), and a chevron at the end shows whether the list is open.
• CommitActions no longer stops the click: it sits above the trigger instead.
• CommitTimestamp picks its unit, from seconds to years, where AI SDK Elements always counted days. It writes the date itself until the page runs, so the server and the browser agree, and locale sets its language.
• CommitAuthorAvatar also takes src and alt for a picture.
• CommitFiles is a ul and CommitFile an li.

FAQ

API Reference