GitHub Repo Stats

Free Data Component by Evixel Studio

Show Preview
GitHub Repo Stats

About GitHub Repo Stats

About This Component

GitHub Repo Stats is a premium Framer component that transforms any GitHub repository URL into a beautiful, interactive statistics card. It fetches live data directly from the GitHub API and presents it with smooth animations and modern visual effects.

Whether you're showcasing your open-source projects, featuring repositories you've contributed to, or building a developer-focused website, this component adds a professional and dynamic touch to your designs.

Key Features

🔴 Live Data FetchingAutomatically pulls real-time statistics from GitHub including stars, forks, watchers, open issues, language, license, topics, and more.

✨ 3D Tilt EffectInteractive perspective-based tilt animation that responds to mouse movement, creating an engaging hover experience.

🌟 Dynamic Edge GlowA stunning border glow effect that follows your cursor along the card edges with customizable color, thickness, and intensity.

🎨 Fully CustomizableComplete control over colors, fonts, border radius, padding, and shadows to match your design system perfectly.

📱 Responsive DesignAdapts beautifully to any container width while maintaining content integrity.

🔧 Visibility ControlsToggle individual sections on/off: avatar, description, topics, dates, and license.

Use Cases

  • Developer Portfolios – Showcase your best open-source projects with live stats

  • Project Documentation – Embed repo cards in landing pages or docs sites

  • Open Source Showcases – Feature community projects with real-time metrics

Property Controls

  • Repository: Simply input the GitHub URL or path (e.g., facebook/react).

  • Appearance: Full control over typography, colors (text/background), radius, padding, and shadows.

  • Visibility: Toggle display for the Avatar, Description, Topics, Dates, and License.

  • Effects: Customize the 3D Tilt, cursor-following Edge Glow intensity, and animation speeds.

Quick Guide

  1. Add the component to your Framer canvas

  2. Paste a GitHub URL in the Repository URL field (e.g., https://github.com/vercel/next.js)

  3. Customise appearance using the colour and style controls

  4. Toggle sections to show only the information you need

  5. Adjust effects – enable/disable 3D tilt and edge glow as desired

  6. Publish and watch your live stats update automatically

Tip: The component handles loading states, errors, and empty states automatically with beautiful UI feedback.

Notes

  • Uses the public GitHub API (no authentication required)

  • Data refreshes on each page load

  • Works with any public GitHub repository