Multiple badge endpoint types
Badges are served from simple, documented URL patterns such as /npm/{package}, /github/{owner}/{repo}, /discord/{serverId}, /skills/{owner}/{repo}/{skill}, and /badge/{label}-{message}-{color}.
shieldcn
shieldcn creates shadcn/ui-style badges for README and docs, with direct URLs and PNG, SVG, and JSON outputs for npm, GitHub, Discord, and more.
What shieldcn does
shieldcn is a badge generator and endpoint service for README, docs, and similar places that accept image URLs. It presents badges styled like shadcn/ui buttons and exposes them through predictable paths for npm, GitHub, Discord, Homebrew, Tokscale, skills.sh, static, and dynamic JSON badges.
The product is designed as a drop-in shields.io replacement with no required API key or build step for basic use. It supports .png and .svg output, and the docs also describe .json and /shields.json responses for raw data or shields.io compatibility.
Features
Flexible response formats
Every badge can be rendered as .png or .svg, with .json and /shields.json available for raw or shields.io-compatible data.
Detailed visual customization
Badges support shadcn Button variants, size options, themes, fonts, colors, icon overrides, label and layout controls, and SVG-only animation effects like pulse, glow, and shimmer.
Icon handling and overrides
Icons are auto-detected by provider, and the docs also allow explicit Simple Icons slugs, React Icons names, disabling the icon, or passing a custom SVG data URI.
Repository badge generation
The generator can auto-detect a stack from a GitHub repository URL and export copy-paste badge markup for README use.
Use cases
README badges for open source projects
Add npm, GitHub, Discord, or similar badges to a project README using a direct image URL. The docs specifically recommend PNG for GitHub READMEs because it renders more consistently across clients.
Repository-aware badge generation
Generate badges from a GitHub repository URL, let the tool detect the stack, and copy the resulting markdown or image URL into docs or repo pages.
Docs site and product page badges
Create buttons and status-style badges for product docs, landing pages, or internal documentation where image tags are accepted.
Custom and dynamic status badges
Use static, dynamic JSON, group, and custom badge endpoints when you need a badge that is not tied to a single package or repository metric.
Format-specific delivery
Swap between PNG and SVG depending on your rendering needs, using PNG for broad compatibility and SVG when you want scalable output or SVG-only animation effects.
skills.sh and profile badge workflows
Generate skill-install and ranking badges for skills.sh repositories, or profile badges from a username-based flow for personal README pages.
Pros and Cons
Pros
- Covers many common developer badge sources, including npm, GitHub, Discord, X/Twitter, Homebrew, Tokscale, and skills.sh.
- Matches shadcn/ui button styling rather than a generic shields.io look.
- Supports both PNG and SVG, plus raw JSON and shields.io-compatible output.
- Offers extensive visual controls, including variants, sizes, fonts, themes, colors, icons, and layout options.
- Requires no API key for static badges and basic badge generation.
Cons
- The docs list many endpoint types and parameters, so the URL surface area may take time to learn.
- Some advanced options, such as animation effects, are SVG-only.
FAQ
What kinds of badges can shieldcn generate?
It generates badge images from predictable URL patterns. For example, the docs show npm, GitHub, Discord, X/Twitter, Homebrew, Tokscale, skills.sh, static, dynamic JSON, flag, and grouped badge endpoints.
Can I generate badges from a GitHub repository URL?
Yes. The generator page supports GitHub repository URLs or owner/repo input for repo badges, and it also points profile badge generation to a username-based flow for profile READMEs.
What output formats does shieldcn support?
Yes. The docs say both .png and .svg are supported, and any endpoint can also be requested as .json or via /shields.json for shields.io compatibility.
Do I need an API key or setup to use shieldcn?
The docs say no configuration, API keys, or build step are required for basic badge URLs.
Quick Facts
- Category
- Developer Tool
- Primary use
- README and docs badges
- Output formats
- PNG, SVG, JSON
- Supported workflow
- URL-based badge generation from direct endpoints or the badge generator
- Source domain
- shieldcn.dev
- Pricing
- Free and open source
shieldcn Alternatives
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repos and verifies changes with compilers, debuggers, sanitizers, and tests.
Epherem
Epherem scans web apps built with Lovable, Bolt, v0, Replit, Cursor, and Claude Code for security flaws in source code and dependencies, without running the app.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads in Firecracker micro-VMs with private networking and SDK, CLI, or MCP control.
GitBot
GitBot is a local browser workspace for reusable coding bots powered by Claude Code, Codex, or OpenCode, with persistent threads and configurable permissions.
hob
hob is an independent workspace for coding agents, with local control over sessions, terminals, history, routing, and follow-up work.
Ably Chat
Ably Chat is a chat API platform for custom realtime chat apps, with rooms, typing indicators, presence, reactions, message updates and usage-based pricing.