A flexible GitHub contribution calendar visualizer that lets you explore and customize your GitHub activity with interactive layouts, color themes, and export options.
- 🎨 Customizable Colors: Pick from preset themes or create your own color schemes
- 📊 Flexible Layouts: Adjust calendar layout and appearance
- 📱 Responsive Design: Works seamlessly on desktop and mobile
- 📸 Export Options: Download your calendar as SVG or PNG
- ⚡ Real-time Preview: See changes instantly as you customize
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/your-username/git-flex.git
cd git-flex- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 in your browser
- Enter your GitHub username in the input field
- View your contribution calendar with default styling
- Customize colors, layout, and appearance using the controls
- Export your calendar as SVG or PNG for use in portfolios, README files, or presentations
- Framework: Next.js 15 with App Router
- Styling: Tailwind CSS
- State Management: Zustand
- Data Fetching: TanStack Query
- UI Components: Radix UI
- Icons: Lucide React
- Export: html2canvas-pro for image generation
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm start- Start production servernpm run lint- Run ESLint
src/
├── app/ # Next.js App Router pages
├── components/ # React components
│ └── ui/ # Reusable UI components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── stores/ # Zustand state stores
├── types/ # TypeScript type definitions
└── constants/ # App constants
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Make your changes and commit:
git commit -m 'Add feature' - Push to the branch:
git push origin feature-name - Submit a pull request
This project is open source and available under the MIT License.