5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T1036,

A live, dual-layout GitHub repo component. Drop in any public repository and choose between a vertical Card for hero blocks or a horizontal Row designed to stack, switched with a single toggle in the property panel.

Pulls real-time stars, forks, open issues, latest release, and primary language straight from the public GitHub API. Refreshes whenever a visitor loads the page, with smart caching to stay within rate limits.

Why use it

Building this yourself means writing the GitHub API integration, handling rate limits, caching responses, designing loading and error states, and making it responsive across breakpoints — easily a full afternoon of work, and you'd still need to do it twice for two layouts. Drop this in instead and ship in 30 seconds.

Static screenshots of repo stats go stale the moment you publish. Live numbers stay accurate forever. Visitors see the real star count, the latest release, the actual activity. That detail signals visitors that the project is alive and maintained, which is exactly what hiring managers, potential clients, and contributors look for in a portfolio.

If you ship real work, your portfolio should show real numbers.

Two layouts, one component

Card

vertical block with a 2-line description and wrapped stats. Perfect as a hero, featured project, or product showcase.

Row

compact horizontal row with truncated description and right-aligned stats. Designed to stack vertically in lists.

Switch between them with the Layout segmented control. All settings (theme, fonts, colors, padding, stat toggles) carry over.

Features

Live data: stars, forks, open issues, latest release tag, primary language, owner, and "updated X ago" timestamp
Theme presets: Light, Dark, or fully Custom (six color controls)
Full Framer font picker for title, body, and stats — Google Fonts and project fonts supported
Native padding control (T/R/B/L with toggle), adjustable border, radius, gap
Toggle visibility for every stat — show only what you need
Smart responsive behavior on Row: description shrinks fluidly, then horizontal scroll kicks in with soft fade gradients on the active edge
Three states: skeleton loading, friendly error, and success
Smart errors that tell users exactly what went wrong: typo'd repo, rate limit hit, network down, or private repo
Hover state on Row with custom hover background color
Accessibility built-in: dynamic aria-label with full repo summary, aria-busy during load

Performance

Uses GitHub's public REST API (60 requests per hour per visitor IP). A built-in 5-minute localStorage cache keeps repeated views and multiple instances on the same page from burning through the limit. No authentication, no third-party services, no tracking.

How to use

Drop the component on your canvas
Pick a Layout (Card or Row) in the right property panel
Set Repo to owner/name (e.g. vercel/next.js)
Pick a theme preset or customize colors
Toggle which stats to show
Stack multiple Row instances for a list view, or use Card as a featured block

Tips

Use Card for a "Featured Project" hero, Row for an "Open Source Projects" stack
Looks great with 8–12px gap between rows in a Stack frame
Light theme for white backgrounds, Dark theme for dark sections
Description automatically truncates with an ellipsis when space is tight

5a:[["$","$L5d",null,{"post":{"id":"019e1b79-1543-7efb-9e64-2b4158e86d74","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"76e533b3-5b1c-4a02-a4e3-ffd407afdb23","name":"Chocolate Agency","slug":"chocolate-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998804/avatar-Z1POQ125HStg4q418mRPUGoU1rpfCW.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"KySqaegxfl2W1zRZ69DV","resolved":true,"title":"Live GitHub Repo","body":"$5e","bodyJson":null,"introduction":"Live GitHub stats - card or row layout","slug":"live-github-repo","author":{"framerUserId":"76e533b3-5b1c-4a02-a4e3-ffd407afdb23","name":"Chocolate Agency","slug":"chocolate-agency","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998804/avatar-Z1POQ125HStg4q418mRPUGoU1rpfCW.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/KySqaegxfl2W1zRZ69DV/live-github-repo-kFlDyGQn4ACJi1NkfMZqEPRQi11AuX","metadata":{"tint":{"h":300,"s":53,"l":63},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-08T07:55:04.185Z","updatedAt":"2026-05-12T09:16:54.627Z","publishedAt":"2026-05-12T09:16:20.675Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://livegithubrepo.framer.website/","price":"7","paymentUrl":"https://buy.stripe.com/5kQ8wJg8w86kfbkgFbdEs00","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"uaJRME37V3KShun7vg5m","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-12T09:16:20.675Z","updatedAt":"2026-05-12T09:16:20.675Z","reported":false}}],"$L5f"]

Suggested for you