shieldcn

What is shieldcn?

shieldcn serves SVG badge images that look like shadcn/ui Button components — same font, border-radius, padding, and color tokens. Use them in GitHub READMEs, npm pages, docs sites, and anywhere that accepts <img> tags.

Quick start

Add a badge to your README:

![npm version](https://shieldcn.dev/npm/react.svg)

That's it. No configuration, no API keys, no build step.

Badge types

Badge	URL pattern
npm version	`/npm/{package}.svg`
npm downloads	`/npm/{package}/downloads.svg`
GitHub stars	`/github/{owner}/{repo}/stars.svg`
GitHub release	`/github/{owner}/{repo}/release.svg`
CI status	`/github/{owner}/{repo}/ci.svg`
License	`/github/{owner}/{repo}/license.svg`
Discord online	`/discord/{serverId}.svg`
Static	`/badge/{label}-{message}-{color}.svg`
Dynamic JSON	`/badge/dynamic/json.svg?url=...&query=...`

Variants

Every badge supports shadcn Button variants:

![default](https://shieldcn.dev/npm/react.svg)

![secondary](https://shieldcn.dev/npm/react.svg?variant=secondary)

![outline](https://shieldcn.dev/npm/react.svg?variant=outline)

![ghost](https://shieldcn.dev/npm/react.svg?variant=ghost)

![destructive](https://shieldcn.dev/npm/react.svg?variant=destructive)

Sizes

![xs](https://shieldcn.dev/npm/react.svg?size=xs)

![sm](https://shieldcn.dev/npm/react.svg?size=sm)

![default](https://shieldcn.dev/npm/react.svg?size=default)

![lg](https://shieldcn.dev/npm/react.svg?size=lg)

Icons

Badges auto-detect icons per provider. Override with any Simple Icons slug or Lucide icon:

![react](https://shieldcn.dev/npm/react.svg?logo=react)

![star](https://shieldcn.dev/badge/stars-42-blue.svg?logo=lucide:star)

![no icon](https://shieldcn.dev/npm/react.svg?logo=false)

Response formats

.svg — SVG image (default, for <img> tags and markdown)
.json — raw badge data
/shields.json — shields.io-compatible endpoint

Built with

Badge components for React → jal-co/ui

Getting Started