shadcn.io is not affiliated with official shadcn/ui
Repo Cards Open Source About Block for Ark UI
Three repository cards for a developer toolkit, drawn like repo headers: owner and name, a description, a language letter, rolling star counts, forks, contributor initials and latest release, with a used-by line.
Installation
Overview
Three repository cards for React with Ark UI, written for Rivetcast, a fictional developer toolkit. On wide screens the repositories are cells whose lines overshoot their corners, three across; on a phone they become bands ruled from rail to rail. Each is drawn like a repository header: the owner and the name as one heading whose link covers the whole cell, a "Public" badge, a short description, the language as a drawn letter with its name, the stars (rolling up once as the cell scrolls into view), forks, a stack of contributor initials with their count and the latest release in relative time. A "used by" line and a link close the block. It's built from Sliding Number, Avatar, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For open-source companies and developer-tool vendors that want to show their public work. The repositories, counts and people are invented.
FAQ
How do I change the repositories?
Edit REPOS at the top of the file: each has a name, a summary, a language, stars, forks, a contributors count, a few initials for the avatar stack and the latest version and release. The language's letter is the first letter of its name. The "used by" figure is USED_BY. Keep three: they sit side by side from lg.
How is a card a link?
The repository's name is a link inside the heading, and a pseudo-element stretches it over the whole cell, so the whole card is one click and one tab stop, with a focus ring around the cell. The stars and the avatar stack are not links, so nothing is nested inside another link.
How do the star counts work, and what about right-to-left?
The stars roll up from zero once, when the cell first scrolls into view, and show the final number at once with reduced motion. Counts are wrapped in bdi, so in a right-to-left layout "18,420" and the labels keep their order. The language is a letter in a circle with its name next to it, so it is never a colour code.
Who are the contributors?
They are initials in a stack, hidden from assistive technology, with the real number written beside them ("212 contributors"). They are invented; replace the initials with your own contributors' (or drop the stack) when you use the block.
How does it fit on a phone?
The three cells stack as full-width bands, each with a rule from rail to rail and a + mark where it meets the rails, and the "used by" line takes the last band. The description wraps, and the language, stars and forks wrap onto two lines when they must. Nothing scrolls sideways at 320 pixels.