ReadmeBadge
Render a shieldcn badge image with optional link wrapping.
Installation
pnpm dlx shadcn@latest add @shieldcn/readme-badgeUsage
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