Commit

AI chats 15

About

An expandable changed-file summary with folder groups, line counts, and a diff action.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Commit to your project and fits it to your theme.

Code

How Commit is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from 'react'
import Commit from '@/components/ui/commit'

export default function Demo() {
  const [showDiff, setShowDiff] = useState(false)
  return (
    <div className="w-full max-w-2xl space-y-3">
      <Commit
        files={[
          { path: 'src/components/ai/permission-grant.tsx', additions: 1, deletions: 1 },
          { path: 'DESIGN.md', additions: 1, deletions: 0 },
        ]}
        onOpen={() => setShowDiff((current) => !current)}
      />
      {showDiff && (
        <div className="space-y-3 rounded-[16px] bg-card p-4 text-xs shadow-card">
          <p className="font-mono text-muted-foreground">src/components/ai/permission-grant.tsx</p>
          <pre className="overflow-x-auto leading-6">
            <code>
              <span className="block text-red-600 dark:text-red-400">− text-sm leading-6</span>
              <span className="block text-emerald-600 dark:text-emerald-400">
                + text-xs leading-5
              </span>
            </code>
          </pre>
          <p className="font-mono text-muted-foreground">DESIGN.md</p>
          <pre className="overflow-x-auto leading-6 text-emerald-600 dark:text-emerald-400">
            <code>+ Supporting text: 12px, weight 450.</code>
          </pre>
        </div>
      )}
    </div>
  )
}