jal-co/shieldcn352

Getting Started

Beautiful README badges. Drop-in shields.io replacement styled as shadcn/ui buttons.

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.png)

That's it. No configuration, no API keys, no build step. Both .png and .svg extensions are supported — just swap the extension.

Use .png for GitHub READMEs — it renders more consistently across clients than .svg.

Badge types

BadgeURL pattern
npm version/npm/{package}
npm downloads/npm/dw/{package}
npm license/npm/license/{package}
npm types/npm/types/{package}
GitHub stars/github/stars/{owner}/{repo}
GitHub forks/github/forks/{owner}/{repo}
GitHub release/github/release/{owner}/{repo}
GitHub CI/github/ci/{owner}/{repo}
GitHub license/github/license/{owner}/{repo}
GitHub issues/github/issues/{owner}/{repo}
GitHub PRs/github/prs/{owner}/{repo}
GitHub commits/github/commits/{owner}/{repo}
Discord online/discord/{serverId}
Discord members/discord/members/{inviteCode}
Reddit karma/reddit/{type}/u/{user}
Static/badge/{label}-{message}-{color}
Dynamic JSON/badge/dynamic/json?url=...&query=...
HTTPS endpoint/https/{hostname}/{path}
Memo/memo/{key}

Append .png or .svg to any endpoint (e.g. /npm/react.png or /npm/react.svg).

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 React Icons component name:

Use logo=false to remove the icon entirely, or pass a data:image/svg+xml;base64,... string for a fully custom icon.
![react](https://shieldcn.dev/npm/react.svg?logo=react)
![star](https://shieldcn.dev/badge/stars-42-blue.svg?logo=ri:GoStarFill)
![no icon](https://shieldcn.dev/npm/react.svg?logo=false)

Response formats

  • .png — PNG image (recommended for GitHub READMEs and most use cases)
  • .svg — SVG image (scalable, smaller file size)
  • .json — raw badge data
  • /shields.json — shields.io-compatible endpoint

Both .png and .svg work everywhere GitHub renders images. Use .png for maximum compatibility across platforms.

Built with

Badge components for React → jal-co/ui