Skip to content

component

GitHub Repo Stats

By Evixel Studio

Details

Summary

About This Component GitHub Repo Stats is a premium Framer component that transforms any GitHub repository URL into a beautiful, interactive statistics card.

Description

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 Fetching Automatically pulls real-time statistics from GitHub including stars, forks, watchers, open issues, language, license, topics, and more. โœจ 3D Tilt Effect Interactive perspective-based tilt animation that responds to mouse movement, creating an engaging hover experience. ๐ŸŒŸ Dynamic Edge Glow A stunning border glow effect that follows your cursor along the card edges with customizable color, thickness, and intensity. ๐ŸŽจ Fully Customizable Complete control over colors, fonts, border radius, padding, and shadows to match your design system perfectly. ๐Ÿ“ฑ Responsive Design Adapts beautifully to any container width while maintaining content integrity. ๐Ÿ”ง Visibility Controls Toggle 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 Add the component to your Framer canvas Paste a GitHub URL in the Repository URL field (e.g., https://github.com/vercel/next.js ) Customise appearance using the colour and style controls Toggle sections to show only the information you need Adjust effects โ€“ enable/disable 3D tilt and edge glow as desired 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

Introduction

Live GitHub repo stats with 3D effects

Rank history

Daily rank per list, from the first snapshot โ€” lower is better.

12001400158088/148/228/309/79/15
  • All ยท #5808