shieldcn
Docs
Studio
Showcase
Sponsor
jal-co/shieldcn606
shieldcn

Member of the Vercel OSS Program

Analytics provided by OpenPanel

Monitored by Sentry

Powered by Neon.

Community

GitHubjal-co/uiStatsllms.txtPrivacyContact

Product

DocumentationAPI ReferenceToken PoolGeneratorAgent Skill

inspired by shields.io and badgen.net

Made with in by Justin Levine

shieldcn
Docs
Studio
Showcase
Sponsor
jal-co/shieldcn606

Search documentation

Search all badge providers, guides, and reference docs.

Getting Started

IntroductionREADME StudioCLIAgent SkillNewSelf-HostingAPI ReferenceToken PoolSponsor

Badges

Badge GroupStatic BadgeDynamic JSONHTTPS Endpoint

Charts

OverviewStar history

Headers

OverviewGenerator

Sponsors

OverviewGenerator

Contributors

OverviewGenerator
OverviewReadmeBadgeReadmeBadgeRowBadgePreview
shieldcn

Member of the Vercel OSS Program

Analytics provided by OpenPanel

Monitored by Sentry

Powered by Neon.

Community

GitHubjal-co/uiStatsllms.txtPrivacyContact

Product

DocumentationAPI ReferenceToken PoolGeneratorAgent Skill

inspired by shields.io and badgen.net

Made with in by Justin Levine

ReadmeBadge

Render a shieldcn badge image with optional link wrapping.

Installation

pnpm dlx shadcn@latest add @shieldcn/readme-badge

Usage

import { ReadmeBadge } from "@/components/readme-badge"

Basic badge

/npm/react.svg
/npm/react.svg?variant=branded

Badge with link

Wraps the badge in an anchor tag that opens in a new tab.

<ReadmeBadge src="https://shieldcn.dev/github/stars/vercel/next.js.svg" alt="Next.js GitHub stars" href="https://github.com/vercel/next.js" />

Custom height

<ReadmeBadge src="https://shieldcn.dev/npm/react.svg?size=lg" alt="React" height={28} />

Variants

/npm/react.svg
/npm/react.svg?variant=secondary
/npm/react.svg?variant=outline
/npm/react.svg?variant=ghost
/npm/react.svg?variant=destructive
/npm/react.svg?variant=branded

API Reference

ReadmeBadge

PropType

On This Page

InstallationUsageBasic badgeBadge with linkCustom heightVariantsAPI Reference