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 generates README and docs badges styled like shadcn/ui buttons. It supports direct URL-based badges for services like npm, GitHub, and Discord, with PNG, SVG, and JSON outputs.
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
Alternative a shieldcn
Ably Chat
Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.
Ghost
Ghost è un assistente AI da terminale per chattare, generare codice ed eseguire task da riga di comando. Include modelli gratuiti, supporta Linux, macOS e Windows, ed è open source.
AakarDev AI
AakarDev AI helps teams manage AI provider access, project-level setups, logs, and analytics from one dashboard. It supports BYOK workflows and lists providers including OpenAI, Google Gemini, Anthropic, Groq, Mistral AI, and Perplexity AI.
DeepMotion
DeepMotion is a web-based AI motion capture and 3D animation platform with Animate 3D for video-to-animation and SayMotion for text-to-animation. It helps creators and teams generate motion in a browser and export results in common production formats.
Arduino VENTUNO Q
Arduino VENTUNO Q is an edge AI computer for AI and robotics applications. It combines AI inference and deterministic control on a single board and is designed to work with Arduino App Lab.
Devin
Devin is an AI coding agent and software engineer that helps developers and engineering teams plan and execute complex software tasks. It is available through desktop, cloud, JetBrains, and CLI surfaces, with plans for individuals, teams, and enterprises.