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
Loading component source...
Installation
pnpm dlx shadcn@latest add mox/mox-ui/contribution-skylineRun this command from your project directory to add the component and its dependencies.
- 1
Install the packages
pnpm add clsx tailwind-merge - 2
Add the utility file
lib/utils.tsimport { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs));} - 3
Copy and paste the code into your project
Loading source… - 4
Update the import paths to match your project
Point
@/lib/utilsto 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
| Prop | Type | Default | Description |
|---|---|---|---|
data | ContributionDay[] | Default: - | Daily counts. Omit to show generated sample data. |
endDate | string | Date | Default: - | Last day shown. Defaults to the latest supplied date, or today. |
defaultView | "2d" | "3d" | Default: "3d" | Starting view. Defaults to the skyline. |
palette | PaletteInput | Default: "github" | Color preset or custom colors. Defaults to the GitHub palette. |
className | string | Default: - | 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.