# GitHub Calendar

> A premium, customizable visualization of GitHub contribution graphs with multiple color schemes and display variants.

<demo-github-calendar>



</demo-github-calendar>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/github-calendar.json"
```

## Usage

```vue
<script setup lang="ts">
  import GithubCalendar from '~/components/ui/github-calendar/GithubCalendar.vue';
</script>

<template>
  <GithubCalendar username="vinayakkulkarni" />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        username
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      GitHub username to fetch contributions for (required)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        variant
      </code>
    </td>
    
    <td>
      <code>
        'default' | 'city-lights' | 'minimal'
      </code>
    </td>
    
    <td>
      <code>
        'default'
      </code>
    </td>
    
    <td>
      Visual style variant
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-schema
      </code>
    </td>
    
    <td>
      <code>
        'green' | 'blue' | 'purple' | 'orange' | 'gray'
      </code>
    </td>
    
    <td>
      <code>
        'green'
      </code>
    </td>
    
    <td>
      Color scheme for cells
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-total
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show total contributions header
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shape
      </code>
    </td>
    
    <td>
      <code>
        'square' | 'rounded' | 'circle' | 'squircle'
      </code>
    </td>
    
    <td>
      <code>
        'rounded'
      </code>
    </td>
    
    <td>
      Cell shape
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow-intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        5
      </code>
    </td>
    
    <td>
      Glow intensity for city-lights variant
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>