Back to Details

shieldcn-badges

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

shieldcn Badges

shieldcn 徽章

Add beautiful shadcn/ui-styled badges to READMEs and docs using shieldcn — a free, open-source shields.io alternative.
Base URL: 
https://shieldcn.dev
使用shieldcn为README和文档添加美观的shadcn/ui风格徽章——它是免费开源的shields.io替代工具。
基础URL：
https://shieldcn.dev

Badge URL format

徽章URL格式

https://shieldcn.dev/{provider}/{...params}.svg     → SVG (default, for READMEs)
https://shieldcn.dev/{provider}/{...params}.png     → PNG
https://shieldcn.dev/{provider}/{...params}.json    → raw data
https://shieldcn.dev/{provider}/{...params}.svg     → SVG（默认格式，适用于README）
https://shieldcn.dev/{provider}/{...params}.png     → PNG
https://shieldcn.dev/{provider}/{...params}.json    → 原始数据

Markdown pattern

Markdown使用格式

md
[![alt](https://shieldcn.dev/{provider}/{params}.svg)](https://link)

<!-- or without link -->
![alt](https://shieldcn.dev/{provider}/{params}.svg)
md
[![alt](https://shieldcn.dev/{provider}/{params}.svg)](https://link)

<!-- 或不带链接 -->
![alt](https://shieldcn.dev/{provider}/{params}.svg)

Providers & endpoints

服务商与端点

Package registries

包注册平台

ProviderEndpointExample
npm version
/npm/{package}
/npm/react
npm version (tag)
/npm/v/{package}/{tag}
/npm/v/next/canary
npm downloads/wk
/npm/dw/{package}
/npm/dw/react
npm downloads/mo
/npm/dm/{package}
/npm/dm/react
npm downloads/yr
/npm/dy/{package}
/npm/dy/react
npm total downloads
/npm/dt/{package}
/npm/dt/react
npm license
/npm/license/{package}
/npm/license/react
npm types
/npm/types/{package}
/npm/types/react
npm dependents
/npm/dependents/{package}
/npm/dependents/react
npm scoped
/npm/v/@scope/pkg
/npm/v/@types/node
PyPI version
/pypi/{package}
/pypi/flask
PyPI downloads/mo
/pypi/dm/{package}
/pypi/dm/flask
Crates.io version
/crates/{crate}
/crates/serde
Docker Hub pulls
/docker/pulls/{image}
/docker/pulls/library/nginx
JSR version
/jsr/{@scope}/{name}
/jsr/@std/path
Bundlephobia minzip
/bundlephobia/minzip/{package}
/bundlephobia/minzip/react
Homebrew version
/homebrew/{formula}
/homebrew/node
Maven version
/maven/{groupId}/{artifactId}
/maven/org.apache.maven/maven-core
Packagist version
/packagist/v/{vendor}/{package}
/packagist/v/laravel/framework
RubyGems version
/rubygems/{gem}
/rubygems/rails
NuGet version
/nuget/{package}
/nuget/Newtonsoft.Json
Pub.dev version
/pub/{package}
/pub/flutter
CocoaPods version
/cocoapods/{pod}
/cocoapods/Alamofire
服务商端点示例
npm 版本
/npm/{package}
/npm/react
npm 版本（指定标签）
/npm/v/{package}/{tag}
/npm/v/next/canary
npm 周下载量
/npm/dw/{package}
/npm/dw/react
npm 月下载量
/npm/dm/{package}
/npm/dm/react
npm 年下载量
/npm/dy/{package}
/npm/dy/react
npm 总下载量
/npm/dt/{package}
/npm/dt/react
npm 许可证
/npm/license/{package}
/npm/license/react
npm 类型定义
/npm/types/{package}
/npm/types/react
npm 依赖项目数
/npm/dependents/{package}
/npm/dependents/react
npm 作用域包
/npm/v/@scope/pkg
/npm/v/@types/node
PyPI 版本
/pypi/{package}
/pypi/flask
PyPI 月下载量
/pypi/dm/{package}
/pypi/dm/flask
Crates.io 版本
/crates/{crate}
/crates/serde
Docker Hub 拉取量
/docker/pulls/{image}
/docker/pulls/library/nginx
JSR 版本
/jsr/{@scope}/{name}
/jsr/@std/path
Bundlephobia 压缩后大小
/bundlephobia/minzip/{package}
/bundlephobia/minzip/react
Homebrew 版本
/homebrew/{formula}
/homebrew/node
Maven 版本
/maven/{groupId}/{artifactId}
/maven/org.apache.maven/maven-core
Packagist 版本
/packagist/v/{vendor}/{package}
/packagist/v/laravel/framework
RubyGems 版本
/rubygems/{gem}
/rubygems/rails
NuGet 版本
/nuget/{package}
/nuget/Newtonsoft.Json
Pub.dev 版本
/pub/{package}
/pub/flutter
CocoaPods 版本
/cocoapods/{pod}
/cocoapods/Alamofire

GitHub

GitHub

Both formats work: 
/github/{topic}/{owner}/{repo}
or 
/github/{owner}/{repo}/{topic}
BadgeEndpointExample
Stars
/github/stars/{owner}/{repo}
/github/stars/vercel/next.js
Forks
/github/forks/{owner}/{repo}
/github/forks/vercel/next.js
License
/github/license/{owner}/{repo}
/github/license/vercel/next.js
Release
/github/release/{owner}/{repo}
/github/release/vercel/next.js
CI status
/github/ci/{owner}/{repo}
/github/ci/vercel/next.js
Issues
/github/issues/{owner}/{repo}
/github/issues/vercel/next.js
Open PRs
/github/open-prs/{owner}/{repo}
/github/open-prs/vercel/next.js
Contributors
/github/contributors/{owner}/{repo}
/github/contributors/vercel/next.js
Last commit
/github/last-commit/{owner}/{repo}
/github/last-commit/vercel/next.js
Watchers
/github/watchers/{owner}/{repo}
/github/watchers/vercel/next.js
Downloads
/github/dt/{owner}/{repo}
/github/dt/vercel/next.js
Dependabot
/github/dependabot/{owner}/{repo}
/github/dependabot/vercel/next.js
CI supports 
?workflow=name&branch=main
query params.
两种格式均可：
/github/{topic}/{owner}/{repo}
或 
/github/{owner}/{repo}/{topic}
徽章类型端点示例
星标数
/github/stars/{owner}/{repo}
/github/stars/vercel/next.js
Fork数
/github/forks/{owner}/{repo}
/github/forks/vercel/next.js
许可证
/github/license/{owner}/{repo}
/github/license/vercel/next.js
版本发布
/github/release/{owner}/{repo}
/github/release/vercel/next.js
CI 状态
/github/ci/{owner}/{repo}
/github/ci/vercel/next.js
问题数
/github/issues/{owner}/{repo}
/github/issues/vercel/next.js
打开的PR数
/github/open-prs/{owner}/{repo}
/github/open-prs/vercel/next.js
贡献者数
/github/contributors/{owner}/{repo}
/github/contributors/vercel/next.js
最后提交时间
/github/last-commit/{owner}/{repo}
/github/last-commit/vercel/next.js
关注者数
/github/watchers/{owner}/{repo}
/github/watchers/vercel/next.js
下载量
/github/dt/{owner}/{repo}
/github/dt/vercel/next.js
Dependabot 状态
/github/dependabot/{owner}/{repo}
/github/dependabot/vercel/next.js
CI支持
?workflow=name&branch=main
查询参数。

Social

社交平台

ProviderEndpointExample
Discord online
/discord/{serverId}
/discord/1316199667142496307
Discord by invite
/discord/members/{inviteCode}
/discord/members/nextjs
Reddit subscribers
/reddit/subscribers/r/{subreddit}
/reddit/subscribers/r/reactjs
Bluesky followers
/bluesky/followers/{handle}
/bluesky/followers/bsky.app
YouTube subs
/youtube/subscribers/{channelId}
/youtube/subscribers/UCxxxxxx
Mastodon followers
/mastodon/followers/{instance}/{acct}
/mastodon/followers/mastodon.social/Gargron
Hacker News karma
/hackernews/{userId}
/hackernews/pg
服务商端点示例
Discord 在线人数
/discord/{serverId}
/discord/1316199667142496307
Discord 邀请链接成员数
/discord/members/{inviteCode}
/discord/members/nextjs
Reddit 订阅者数
/reddit/subscribers/r/{subreddit}
/reddit/subscribers/r/reactjs
Bluesky 关注者数
/bluesky/followers/{handle}
/bluesky/followers/bsky.app
YouTube 订阅数
/youtube/subscribers/{channelId}
/youtube/subscribers/UCxxxxxx
Mastodon 关注者数
/mastodon/followers/{instance}/{acct}
/mastodon/followers/mastodon.social/Gargron
Hacker News 积分
/hackernews/{userId}
/hackernews/pg

Code quality

代码质量

ProviderEndpointExample
Codecov
/codecov/{service}/{owner}/{repo}
/codecov/gh/vercel/next.js
VS Code installs
/vscode/installs/{publisher}/{ext}
/vscode/installs/esbenp/prettier-vscode
WakaTime
/wakatime/{username}
/wakatime/@user
服务商端点示例
Codecov
/codecov/{service}/{owner}/{repo}
/codecov/gh/vercel/next.js
VS Code 安装量
/vscode/installs/{publisher}/{ext}
/vscode/installs/esbenp/prettier-vscode
WakaTime
/wakatime/{username}
/wakatime/@user

Custom badges

自定义徽章

TypeEndpointExample
Static
/badge/{label}-{message}-{color}
/badge/build-passing-brightgreen
Dynamic JSON
/badge/dynamic/json?url=...&query=...
Fetch any JSON API
HTTPS endpoint
/https/{hostname}/{path}
Proxy any JSON endpoint
类型端点示例
静态徽章
/badge/{label}-{message}-{color}
/badge/build-passing-brightgreen
动态JSON徽章
/badge/dynamic/json?url=...&query=...
调用任意JSON API
HTTPS端点代理
/https/{hostname}/{path}
代理任意JSON端点

Query parameters

查询参数

Append to any badge URL as 
?key=value&key2=value2
.
ParamValuesDefaultNotes
variant
default
, 
secondary
, 
outline
, 
ghost
, 
destructive
, 
branded
default
shadcn Button variant
size
xs
, 
sm
, 
default
, 
lg
sm
Badge size
mode
dark
, 
light
dark
Color mode
split
true
, 
false
false
Two-tone label/value split
logo
SimpleIcons slug, 
ri:Name
, 
false
autoIcon source
logoColor
hex (no 
#
)		autoIcon color
label
stringautoOverride label text
color
hex (no 
#
)		—Background color
labelColor
hex (no 
#
)		—Label side bg (split mode)
theme
zinc
, 
slate
, 
blue
, 
green
, 
rose
, 
orange
, 
violet
—Color theme
font
inter
, 
geist
, 
geist-mono
inter
Font family
statusDot
true
, 
false
auto for CIShow status indicator dot
以
?key=value&key2=value2
的形式追加到任意徽章URL后。
参数可选值默认值说明
variant
default
, 
secondary
, 
outline
, 
ghost
, 
destructive
, 
branded
default
shadcn按钮样式变体
size
xs
, 
sm
, 
default
, 
lg
sm
徽章尺寸
mode
dark
, 
light
dark
颜色模式
split
true
, 
false
false
标签/值分色显示
logo
SimpleIcons 标识名, 
ri:Name
, 
false
自动匹配图标来源
logoColor
十六进制颜色（不带
#
）		自动匹配图标颜色
label
字符串自动匹配覆盖标签文本
color
十六进制颜色（不带
#
）		—背景颜色
labelColor
十六进制颜色（不带
#
）		—标签侧背景色（分色模式下）
theme
zinc
, 
slate
, 
blue
, 
green
, 
rose
, 
orange
, 
violet
—颜色主题
font
inter
, 
geist
, 
geist-mono
inter
字体族
statusDot
true
, 
false
CI类徽章自动显示显示状态指示点

Common recipes

常见用法示例

Typical README badge row

典型README徽章行

md
<p align="center">
  <a href="https://www.npmjs.com/package/{pkg}"><img src="https://shieldcn.dev/npm/{pkg}.svg" alt="npm" /></a>
  <a href="https://github.com/{owner}/{repo}/stargazers"><img src="https://shieldcn.dev/github/stars/{owner}/{repo}.svg" alt="stars" /></a>
  <a href="https://github.com/{owner}/{repo}"><img src="https://shieldcn.dev/github/license/{owner}/{repo}.svg" alt="license" /></a>
  <a href="https://github.com/{owner}/{repo}/actions"><img src="https://shieldcn.dev/github/ci/{owner}/{repo}.svg" alt="CI" /></a>
</p>
md
<p align="center">
  <a href="https://www.npmjs.com/package/{pkg}"><img src="https://shieldcn.dev/npm/{pkg}.svg" alt="npm" /></a>
  <a href="https://github.com/{owner}/{repo}/stargazers"><img src="https://shieldcn.dev/github/stars/{owner}/{repo}.svg" alt="stars" /></a>
  <a href="https://github.com/{owner}/{repo}"><img src="https://shieldcn.dev/github/license/{owner}/{repo}.svg" alt="license" /></a>
  <a href="https://github.com/{owner}/{repo}/actions"><img src="https://shieldcn.dev/github/ci/{owner}/{repo}.svg" alt="CI" /></a>
</p>

Secondary variant (lighter)

次要变体（浅色风格）

md
![badge](https://shieldcn.dev/npm/react.svg?variant=secondary)
md
![badge](https://shieldcn.dev/npm/react.svg?variant=secondary)

Branded variant (brand-colored bg)

品牌变体（品牌色背景）

md
![badge](https://shieldcn.dev/npm/react.svg?variant=branded)
md
![badge](https://shieldcn.dev/npm/react.svg?variant=branded)

Split badge (two-tone)

分色徽章（双色显示）

md
![badge](https://shieldcn.dev/npm/react.svg?split=true)
md
![badge](https://shieldcn.dev/npm/react.svg?split=true)

Light mode

浅色模式

md
![badge](https://shieldcn.dev/npm/react.svg?mode=light)
md
![badge](https://shieldcn.dev/npm/react.svg?mode=light)

Custom icon

自定义图标

md
![badge](https://shieldcn.dev/npm/react.svg?logo=typescript)
![badge](https://shieldcn.dev/github/stars/owner/repo.svg?logo=ri:GoStarFill)
md
![badge](https://shieldcn.dev/npm/react.svg?logo=typescript)
![badge](https://shieldcn.dev/github/stars/owner/repo.svg?logo=ri:GoStarFill)

No icon

无图标

md
![badge](https://shieldcn.dev/npm/react.svg?logo=false)
md
![badge](https://shieldcn.dev/npm/react.svg?logo=false)

Rules

使用规则

  1. Always use 
    .svg
    for markdown images (best quality, smallest size)
  2. Use 
    <a>
    wrapper to make badges clickable links
  3. Use 
    <p align="center">
    to center badge rows in GitHub READMEs
  4. Replace 
    {owner}
    , 
    {repo}
    , 
    {package}
    with actual values — never leave placeholders
  5. Default variant (
    default
    ) works on both light and dark GitHub themes
  6. Icons are auto-resolved per provider — only set 
    ?logo=
    to override
  7. For npm scoped packages, use the full scope: 
    /npm/v/@scope/package
  8. Prefer 
    variant=secondary
    for subtle badge rows
  9. Keep badge rows to 3–6 badges for readability
  10. Link each badge to its relevant page (npm registry, GitHub stars page, etc.)
  1. 始终为Markdown图片使用
    .svg
    格式（质量最佳，体积最小）
  2. 使用
    <a>
    标签包裹徽章，使其成为可点击链接
  3. 在GitHub README中使用
    <p align="center">
    来居中徽章行
  4. 将
    {owner}
    、
    {repo}
    、
    {package}
    替换为实际值——切勿保留占位符
  5. 默认变体（
    default
    ）在GitHub浅色和深色主题下均适用
  6. 图标会根据服务商自动匹配——仅在需要覆盖时设置
    ?logo=
    参数
  7. 对于npm作用域包，使用完整作用域路径：
    /npm/v/@scope/package
  8. 推荐使用
    variant=secondary
    来创建更低调的徽章行
  9. 徽章行保持3-6个徽章以保证可读性
  10. 将每个徽章链接到对应的相关页面（npm registry、GitHub星标页面等）

Docs

文档

Full documentation: https://shieldcn.dev/docs API reference: https://shieldcn.dev/docs/api-reference Badge builder: https://shieldcn.dev (interactive UI)
完整文档：https://shieldcn.dev/docs API参考：https://shieldcn.dev/docs/api-reference 徽章构建器：https://shieldcn.dev（交互式UI）