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.
๐ด 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.
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
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.
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.
Uses the public GitHub API (no authentication required)
Data refreshes on each page load
Works with any public GitHub repository