A premium, customizable visualization of GitHub contribution graphs with multiple color schemes and display variants.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/github-calendar.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
<script setup lang="ts">
import GithubCalendar from '~/components/ui/github-calendar/GithubCalendar.vue';
</script>
<template>
<GithubCalendar username="vinayakkulkarni" />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
username | string | - | GitHub username to fetch contributions for (required) |
variant | 'default' | 'city-lights' | 'minimal' | 'default' | Visual style variant |
color-schema | 'green' | 'blue' | 'purple' | 'orange' | 'gray' | 'green' | Color scheme for cells |
show-total | boolean | true | Show total contributions header |
shape | 'square' | 'rounded' | 'circle' | 'squircle' | 'rounded' | Cell shape |
glow-intensity | number | 5 | Glow intensity for city-lights variant |
class | string | '' | Additional CSS classes |