Commit

Shows a commit message, full-hash copy, author and time, with expandable changed files.

Preview

Keep drafts after a failed request
a1b2c3dMina
2 changed files
  • modified18 additions4 deletions
  • added32 additions0 deletions

In action

Inspect changed files and copy the commit

Keep drafts after a failed request
a1b2c3dMina
2 changed files
  • modified18 additions4 deletions
  • added32 additions0 deletions

When to use

Use it for

  • Inspect a supplied commit and its changed files.
  • Use onFileSelect for navigation or an inline diff; the callback receives the full file record.
  • Supply timeLabel for application-localized or relative time. The fallback is a stable UTC timestamp.

Avoid

  • Running git commands or fetching file content from a display component.
  • Passing a shortened hash when the copy action must return the complete revision.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { Commit } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/commit.

Copy the source

npx @noorddev/vlak-cli add commit

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/commit.json

Installs the same source through the shadcn CLI.

React

import { Commit } from "@noorddev/vlak-react";

<Commit hash="a1b2c3d4e5f60718293a4b5c6d7e8f901234abcd" message="Retain failed drafts" author="Mina" timestamp="2026-09-09T10:20:00Z" defaultOpen files={[{ path: "src/composer.tsx", status: "modified", additions: 18, deletions: 4 }]} />

See the integration example to compose these components with your application's model and data.

Props

Commit

Supplied commit metadata and changed files with exact hash copy and optional file navigation.

PropTypeDefaultDescription
hashrequiredstring
messagerequiredstring
authorReactNode
avatarReactNode
timestampstring | DateISO date or Date; a supplied timeLabel can use the application's locale or relative clock.
timeLabelstring
filesCommitFile[][]
defaultOpenbooleanfalse
onFileSelect(file: CommitFile) => void
onCopy(hash: string) => void | Promise<void>

Also accepts Omit<HTMLAttributes<HTMLElement>, "onCopy" | "title">.

The ref reaches HTMLElement.

Keyboard

KeysDoes
TabTab reaches copy, the file disclosure and optional file buttons.
Enter, SpaceEnter or Space activates copy, disclosure or the focused file callback.

Accessibility

  • The article includes the shortened hash in its accessible name while copy uses the complete supplied hash.
  • Change status and additions/deletions use text, independent of color.
  • Timestamp uses a machine-readable time element. Invalid dates are omitted.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<article class="rs-commit" aria-label="Commit a1b2c3d"><header class="rs-commit-header"><div class="rs-commit-heading"><span class="rs-commit-message">Retain failed drafts</span><div class="rs-commit-metadata"><code>a1b2c3d</code><span>Mina</span></div></div></header><div class="rs-commit-content"><details class="rs-disclosure"><summary class="rs-disclosure-summary">1 changed file</summary><ul class="rs-commit-list"><li class="rs-commit-file"><code class="rs-commit-path">src/composer.tsx</code><span class="rs-commit-count">18 additions</span></li></ul></details></div></article>

Classes

.rs-commit.rs-commit-header.rs-commit-heading.rs-commit-message.rs-commit-metadata.rs-commit-content.rs-commit-list.rs-commit-file.rs-commit-path.rs-commit-count

Depends on

BadgeButtonCollapsibleSnippet

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas