shieldcn - README badges rendered as real shadcn/ui buttons (Vercel OSS Program)

Hi all, I’m Justin! I’ve been building shieldcn, a badge service for READMEs that renders every badge as an actual shadcn/ui Button component instead of the usual flat shields.io look. Same Inter font, same border-radius, same color tokens per variant. It’s all SVG, rendered server-side with Satori (Vercel’s JSX-to-SVG library), so the badges drop straight into a GitHub README, npm page, or docs site.

A few things people here might find interesting:

  • Every endpoint is public and free. No API keys, no paywalled tiers, and I’m keeping it that way.
  • Providers for npm, GitHub, Discord, and Reddit, plus static and dynamic JSON badges. There’s a CLI (`npx shieldcn-cli`) that scans a repo and writes the markdown for you, and a one-command migrate from existing shields.io URLs.
  • You can self-host the whole badge engine as a Docker image if you’d rather not depend on my deployment.

It runs on Next.js on Vercel, and shieldcn just got into the Vercel OSS Program which is a big part of why I can keep it free and public. Wanted to share it here and say thanks for that. I hope to see you guys use it.

Site: https://shieldcn.dev

Repo: https://github.com/jal-co/shieldcn

Happy to answer anything about the Satori rendering or the GitHub token-pool I use to stay under rate limits. Feedback welcome, I’m always learning.

Justin

2 Likes