Badge Group
Combine multiple badges into a single joined image — like a shadcn ButtonGroup.
Combine multiple badges into a single image with shared rounded edges and separator lines between segments — styled like a shadcn ButtonGroup.
Branded
Secondary
Outline
Default
URL format
Join multiple badge paths with + under the /group/ prefix:
/group/{badge1}+{badge2}+{badge3}.svgEach segment is a normal badge endpoint path — npm/react, github/stars/vercel/next.js, etc. Query parameters apply to all segments.
Quick examples
Three badges joined — npm version, GitHub stars, and license
GitHub-only group in outline variant
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/group/github/stars/vercel/next.js+github/forks/vercel/next.js+github/license/vercel/next.js.svg?variant=outline&mode=dark"><img alt="github group" src="https://shieldcn.dev/group/github/stars/vercel/next.js+github/forks/vercel/next.js+github/license/vercel/next.js.svg?variant=outline&mode=light"></picture>npm version paired with CI status
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/group/npm/react+github/ci/vercel/next.js.svg?variant=secondary&mode=dark"><img alt="npm + ci group" src="https://shieldcn.dev/group/npm/react+github/ci/vercel/next.js.svg?variant=secondary&mode=light"></picture>How it works
- Each segment fetches data from its provider independently (in parallel)
- Icons are resolved per-segment using the provider's default icon
- For branded variant, each segment uses its own provider brand color
- The outer corners are rounded; inner edges are flat with a 1px separator line
- All query parameters (
variant,size,mode,theme,font) apply to every segment
Limitations
- Per-segment query overrides (different variant per segment) are not supported — use query params for the whole group
- Maximum recommended: 5 segments (beyond that the badge gets very wide)
splitmode is not supported inside groupsgradientis not supported on groups
Data source
Each segment fetches from its respective provider. No additional API calls.