I love <a href="http://shields.io" target="_blank" rel="noopener nofollow">shields.io</a>. I’ve used it on every project for years and this isn’t meant to replace it or take away from it at all. I just wanted badges that matched the rest of my UI, so I built <a href="https://shieldcn.dev?ref=dailydev" target="_blank" rel="noopener nofollow">shieldcn</a> as an alternative for people who want that shadcn look.
Every badge is a real shadcn/ui Button component rendered to SVG via Satori. Same Inter font, same border-radius, same padding, same color tokens. You swap the URL and your badges look like actual buttons.
<pre><code>![npm](https://shieldcn.dev/npm/react.svg)
![stars](https://shieldcn.dev/github/stars/vercel/next.js.svg)
![discord](https://shieldcn.dev/discord/1316199667142496307.svg)
</code></pre>
<h2>Variants</h2>
All the shadcn Button variants work: default, secondary, outline, ghost, destructive. Plus a <code>branded</code> variant that pulls the icon’s brand color automatically.
<pre><code>![branded](https://shieldcn.dev/npm/react.svg?variant=branded)
![outline](https://shieldcn.dev/npm/react.svg?variant=outline)
</code></pre>
<h2>How it works under the hood</h2>
SVGs embedded as <code>&lt;img&gt;</code> tags are fully sandboxed. No external CSS, no CSS variables, no JS. So every shadcn color token gets resolved to a literal hex value before Satori renders the component.
One <code>resolve()</code> function computes all bg/fg/border colors from the variant + size + mode + theme. The renderer itself has zero variant-specific branching, it just receives hex values and lays out the badge. Adding a new variant means adding a row to a token table, not touching render logic.
A few Satori things I learned building this:
<ul>
<li><code>opacity</code> CSS property is silently ignored, use <code>rgba()</code> with baked-in alpha instead</li>
<li>No <code>dangerouslySetInnerHTML</code>, so every SVG icon has to be parsed into a React element tree</li>
<li>Fonts need to be loaded from the filesystem with <code>readFileSync</code>, not fetched from a URL</li>
</ul>
<h2>What’s covered</h2>
25+ data providers: npm, PyPI, GitHub (stars, CI, issues, PRs, releases, downloads, license, contributors, Dependabot, etc.), Discord, Docker Hub, <a href="http://Crates.io" target="_blank" rel="noopener nofollow">Crates.io</a>, Homebrew, NuGet, Codecov, VS Code Marketplace, Bluesky, YouTube, Reddit, and more.
40,000+ icons from SimpleIcons, Lucide, and React Icons. Custom SVG upload via base64 too.
<h2>Registry</h2>
There’s a shadcn component registry if you want badge components in your own app:
<pre><code>pnpm dlx shadcn@latest add &quot;https://shieldcn.dev/r/readme-badge.json&quot;
</code></pre>
<h2>Links</h2>
<ul>
<li>Homepage + badge builder: <a href="https://shieldcn.dev?ref=dailydev" target="_blank" rel="noopener nofollow">shieldcn.dev</a></li>
<li>Docs: <a href="https://shieldcn.dev/docs?ref=dailydev" target="_blank" rel="noopener nofollow">shieldcn.dev/docs</a></li>
<li>GitHub: <a href="https://github.com/jal-co/shieldcn?ref=dailydev" target="_blank" rel="noopener nofollow">github.com/jal-co/shieldcn</a></li>
</ul>
MIT licensed, everything free, PRs welcome. I’d love to see you guys use it.

Justin Levine

shieldcn is a shields.io alternative that renders badges as shadcn/ui Button components converted to SVG via Satori. Badges match the shadcn design system exactly — same Inter font, border-radius, padding, and color tokens resolved to literal hex values. Supports all shadcn Button variants (default, secondary, outline, ghost, destructive, branded), 25+ data providers (npm, GitHub, PyPI, Discord, Docker Hub, etc.), and 40,000+ icons. A shadcn component registry entry is also available for embedding badge components directly in your app. MIT licensed and free.

I built a shields.io alternative that renders badges as shadcn/ui buttons