Make it yours.
Your colors, your shape, your stats, set in your type.
GitHub, in a different light
Your contributions. Your signature.
3,591 contributions in the last year
lessmore
- 3,591
- contributions
- 264
- active days
- 13
- day streak
- 24
- on best day
Take the component.
What you see is what you copy, year picker and stats included.
No keys to manage.
Public contribution counts. No GitHub login or token.
Ready-made looks
Ten ways to wear your year.
Finished designs, ready to paste.
Pick a palette, then copy the code.
Profile page
2DThe classic
The familiar calendar, with a year picker.
The classic preview
Portfolio
2DHoneycomb
Offset hexagons with mono stats.
Honeycomb preview
Personal site
2DQuiet orbit
Soft dots over four stat cards.
Quiet orbit preview
Landing page
3DAfter hours
Your year as a lit skyline.
After hours preview
Team dashboard
3DBrick by brick
Busier days stack taller bricks.
Brick by brick preview
Minimal
2DRings
Hollow rings. No labels, just rhythm.
Rings preview
Analytics
2DBy the numbers
Every day shows its own count.
By the numbers preview
Résumé
2DDiamond cut
Diamond cells with a divided stat row.
Diamond cut preview
Year in review
3DCylinders
Round columns rise from the floor.
Cylinders preview
Changelog
2DBarcode
Slender bars, month labels only.
Barcode preview
Built to be borrowed
A username is all you need.
Install heatmap-ui, copy the component into your project, and pass a username. The copied source carries every setting from the preview, and brings its own year picker, so there is nothing else to build.
- 01 Install the library
- 02 Save as
github-activity.tsx - 03 Import it into your page
Have your own data? Pass daily counts to the exported GithubActivity view instead.
npm i @thilakbhat/heatmap-uiyour-page.tsx
import GithubProfile from "./github-activity";
export default function Profile() {
return <GithubProfile username="tb962" />;
}The graph, explained
What a GitHub contribution graph shows
A contribution graph is a calendar heatmap of public GitHub activity: one cell for each day, one column for each week, and a colour that deepens as the count rises. Commits to a default branch, issues, pull requests and discussions you open, and pull request reviews all count toward a day.
This generator reads the public calendar for any username, draws it with heatmap-ui, and gives you the React component. The graph is plain SVG, so it stays sharp at any size and follows your light or dark theme.
Switch between the last 12 months and any calendar year since the account began. Each view recalculates its totals, streaks, and best day for exactly the dates on screen.
Four numbers, defined
How the stats are counted
Every figure covers the period on screen, so switching years changes the numbers with the graph.
- Contributions
- Every public contribution in the selected period, added up day by day.
- Active days
- Days with at least one contribution, and their share of all the days in the period.
- Longest streak
- The longest run of consecutive active days, with the dates it began and ended.
- Best day
- The single day with the most contributions, and when it happened.
01
02
03
04
Under the hood
Why it holds up in production
The same component on this page is the one you copy. Nothing is simplified for the demo.
Fits any container
Built on heatmap-ui 0.3.0 fitted weeks. Wide layouts show the whole year; narrow ones drop the oldest weeks first, and phones scroll from the newest.
Real 3D in plain SVG
Skyline, Lego, blocks, cylinders, and bars. Drag or use the keyboard to orbit. No WebGL, no canvas, nothing to configure.
One file, no dependencies
The copied component needs only React and heatmap-ui. The year selector, the stats, and the data fetch all live in the same file.
Readable for everyone
Tooltips on every day, a keyboard-friendly year selector, labelled stats, and motion that respects reduced-motion settings.
A few more details
Good questions.
About the data, the component, and where it fits.
Do I need a GitHub token to view a contribution graph?
No. This browser preview reads public contribution counts from a public, cached contribution endpoint. It never asks for a GitHub login or token.
Does the graph include private contributions?
The browser preview can only show the public contribution calendar available for a profile. Private contribution details are not exposed to an unauthenticated public widget.
How do I use the data in my own React app?
Install heatmap-ui, copy the component with your chosen settings, and render GithubProfile with a username. If you already have daily counts from your own backend, pass them to the exported GithubActivity view instead.
Can I show a specific year instead of the last 12 months?
Yes. The component has its own year selector, listing the last 12 months and every calendar year with public activity. Totals, streaks, and the best day recalculate for the year on screen. To hide the selector, set year to false in the DISPLAY line at the top of the copied file.
How do I change colors, shapes, or stats after copying?
Every setting is a single line at the top of github-activity.tsx: COLORS, MODE (2D or 3D), SHAPE, BLOCKS, STATS, FONT, TINT, and DISPLAY. Change a line and the graph restyles. There is no configuration file or theme provider to set up.
Does it work with Next.js and server rendering?
Yes. The file is a client component, marked with "use client", so it drops into the Next.js App Router, Vite, Remix, or any app on React 18.2 or later. It fetches in the browser. To fetch on the server instead, load the counts there and pass them to GithubActivity.
Will the graph fit a narrow layout or a phone?
It fits its container. On a wide page it shows the full year; in a narrower column it shows as many recent weeks as fit, dropping the oldest first. On a phone it keeps at least half a year and scrolls from the latest week, with the weekday labels held still.
Which time zone are the days counted in?
Each day is the date GitHub reports for the contribution. The component stops at today in the viewer's time zone, so a year that is still under way never shows empty future days.
Is it free to use in commercial projects?
Yes. heatmap-ui is open source under the MIT license, and the copied component is yours to change and ship.
More than a contribution graph.
Explore all heatmap patterns