Github Zepa

Name: Zepa UI
Author: Sameer Shaik

Contribution calendar — a year of activity as a seven-row grid of levelled cells, with month labels, a hover tooltip, a legend and a stats line. Columns align to real calendar weeks and crowded month labels are dropped automatically. Data arrives as a prop with a deterministic generated default, so nothing is requested at runtime.

Install

shadcn CLI

npx shadcn@latest add https://zepa.design/r/github-zepa.json

GitHub: @vij-sameerb5

Code

/**
 * Zepa UI — github-zepa
 * https://zepa.design/components/github-zepa
 * Free to use in your projects. Please don't republish or resell as your own.
 */
"use client"

import { GithubZepa } from "./ui/github-zepa"

export default function GithubZepaDemo() {
  return (
    <section
      className="relative flex w-full items-center justify-center bg-[#0a0a0a] px-6 py-16 text-white"
      style={{
        minHeight: "100vh",
        fontFamily: "var(--font-manrope), ui-sans-serif, system-ui, sans-serif",
      }}
    >
      <GithubZepa username="zepa-ui" cellSize={15} cellGap={4} />
    </section>
  )
}

export const __demoId = "abc210391ea8"

Live demo

Loading demo…