git-commit-themev2.0
Git Commit Theme Builder

Make your contribution gridfeel like a git commit story

Centered, clean, and commit-friendly. Pick a palette, preview the grid, then copy React code that drops straight into your portfolio.

Generate ThemeBrowse Themes
8 Themes9 Shapes← Instant Code

Built for clean, centered git aesthetics

A focused toolkit for a commit-first portfolio grid.

Commit-first palettes

Green-forward and ember accents tuned for git logs and contribution heatmaps.

Git log polish

Preview your streak like a clean git log: labels, counts, and legend styles.

Ready-to-push code

Generate clean React output that fits into any portfolio or README.

START BUILDING BELOW

[ BUILDER ]

Preview, tweak, and ship

Everything here updates the live preview. Keep it centered, keep it clean.

PREVIEW

Live grid from the selected username.

CUSTOMIZE

Tweak the grid and labels, then fine-tune visuals.

Press Enter to refresh the preview.

0%
Show total count
Show color legend
Show hover tooltip

Themes

Pick a preset or surprise mix.

Code

Copy and paste straight into your portfolio.

class=class="code-string">"code-comment">// Built by Dhirender Choudhary
class=class="code-string">"code-comment">// use pnpm
import React, { useState } from 'react';
import { GitHubCalendar } from 'react-github-calendar';
export default function CalendarPreview() {
  const [tip, setTip] = useState(null);
  const blockSize = 12;
  const blockMargin = 4;
  const radius = (0 / 50) * (blockSize / 2);
  const shapeRadius = radius;
  return (
    class="code-tag"><div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      class="code-tag"><GitHubCalendar
        username="Jarred-Sumner"
        theme={{ dark: ['#141414', '#1e3a2f', '#2d6a4f', '#40916c', '#52b788'] }}
        blockSize={blockSize}
        blockMargin={blockMargin}
        showTotalCount={true}
        showColorLegend={true}
      labels={{
        totalCount: '{{count}} contributions in {{year}}',
      }}
        renderBlock={(block, activity) => {
          const { x, y, width, height, ...restProps } = block.props;
          const nx = Number(x);
          const ny = Number(y);
          const s = Number(width);
          const cx = nx + s / 2;
          const cy = ny + s / 2;
          let shapeElement;
          shapeElement = class="code-tag"><rect x={nx} y={ny} width={s} height={s} rx={shapeRadius} ry={shapeRadius} {...restProps} />;
          return React.cloneElement(shapeElement, {
            onMouseEnter: (e) => {
              const r = e.currentTarget.getBoundingClientRect();
              setTip({
                x: r.left + r.width / 2,
                y: r.top - 8,
                count: activity.count,
                date: activity.date,
              });
            },
            onMouseLeave: () => setTip(null)
          });
        }}
      />
      {tip && (
        class="code-tag"><div style={{ position: 'fixed', left: tip.x + 'px', top: tip.y + 'px', transform: 'translate(-50%, -100%)', background: '#0d1117', color: '#c9d1d9', padding: '6px 10px', borderRadius: '6px', fontSize: '11px', pointerEvents: 'none', zIndex: 1000 }}>
          {tip.count} contributions on {tip.date}
        class="code-tag"></div>
      )}
    class="code-tag"></div>
  );
}