Shieldcn
README badges styled as shadcn/ui buttons
What Is the Shieldcn?
Shieldcn is an open-source badge generator for README files. It helps you create modern SVG badges for services like npm, GitHub, Discord and 25+ other providers.
The main difference is design quality. Shieldcn badges are based on real shadcn/ui Button components, which makes them feel more like part of a modern Tailwind or shadcn/ui project instead of a traditional status label.
TL;DR
Shieldcn is a free, open-source alternative to Shields.io for developers who want README badges that look more modern. Instead of the classic flat badge style, it renders real shadcn/ui Button components into SVG using Satori, so the badges feel closer to a polished UI system.
It is a strong fit for open-source projects, npm packages, GitHub repos, Discord communities and developer tools that want cleaner README visuals without giving up dynamic badge functionality.
Features ✨
Creates README badges as SVG files
Uses real shadcn/ui Button components
Renders badges with Satori
Supports npm, GitHub, Discord and 25+ other providers
Includes 40k+ icons
Free forever
Open source
MIT licensed
Good fit for modern developer projects
Useful for GitHub README files, docs pages and package pages
Included Components 📒
Shieldcn includes the core pieces needed to build and use modern README badges:
Badge builder
SVG badge output
shadcn/ui-style button variants
Provider-based badges
npm badges
GitHub badges
Discord badges
Icon support
Theme and style controls
Markdown-ready badge links
Pros and Cons
Pros ✅
Badges look more modern than classic shields.io badges
Great match for shadcn/ui, Tailwind CSS and modern frontend projects
Open source and MIT licensed
Free forever
Supports many useful developer providers
Large icon library makes customization easier
SVG output is easy to use in README files
Satori rendering gives badges a clean component-based look
Cons ⚠️
Fewer providers than the long-established badge platforms
Newer project, so docs and edge cases may still grow over time
Best suited for projects that like the shadcn/ui visual style
Developers who prefer classic flat badges may not need the switch
Integration
Add badges directly to a GitHub README
Use SVG badge URLs in Markdown
Add npm package badges to package documentation
Add GitHub repo status or project badges
Add Discord community badges
Use icons to match your stack, tool or service
Use it alongside shadcn/ui, Tailwind CSS, Next.js, React or any open-source project page
FAQ
Is Shieldcn free?
Yes. Shieldcn is free forever and open source.
Can I use Shieldcn badges in a GitHub README?
Yes. Shieldcn badges are SVG-based and can be added to README files with standard Markdown.