Skip to content

Contribution skyline

A contribution calendar with a heatmap and an interactive 3D skyline.

1,720 contributions in the last year

1 year total
1,720contributions
Nov 6, 2016 to Nov 8, 2017
Busiest day
54contributions
Jul 25
Longest streak
27days
Apr 17 to May 13
Current streak
2days
Nov 7 to Nov 8
Drag to orbit · double-click to reset
LessMore

Installation

  1. 1

    Install the packages

    pnpm add clsx tailwind-merge
  2. 2

    Add the utility file

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
    export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}
  3. 3

    Copy and paste the code into your project

    Loading source…
  4. 4

    Update the import paths to match your project

    Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx
import ContributionSkyline from "@/components/ui/contribution-skyline";
export function Demo() {  return <ContributionSkyline endDate="2017-11-08" />;}

Props

PropTypeDefaultDescription
dataContributionDay[]Default: -Daily counts. Omit to show generated sample data.
endDatestring | DateDefault: -Last day shown. Defaults to the latest supplied date, or today.
defaultView"2d" | "3d"Default: "3d"Starting view. Defaults to the skyline.
palettePaletteInputDefault: "github"Color preset or custom colors. Defaults to the GitHub palette.
classNamestringDefault: -Extra classes merged onto the root element.

Switch between the heatmap and skyline. Hover or tap a day to see its count. Use arrow keys to explore. Drag the skyline to orbit, and double-click to reset.

Credits and license

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Mox UI is appreciated when using a component.
  • Please don't resell the components as your own kit.
Contact Mox UI