shieldcn

shieldcn is a Markdown badge service first — every badge is a URL you drop into a README, docs page, or anywhere Markdown renders.

But if you're building with React, you can also install lightweight helpers via the shadcn registry. These components make it easy to render, layout, and preview shieldcn badges in your app.

Setup

Add the shieldcn registry to your components.json:

"registries": { "@shieldcn": "https://shieldcn.dev/r/{name}.json" }

Then install any component:

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

Available components

ReadmeBadge

Renders a shieldcn badge image with optional link wrapping. Works with any badge URL.

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

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

/npm/react.svg?variant=branded

/github/stars/vercel/next.js.svg?variant=outline

ReadmeBadgeRow

Horizontal layout wrapper for multiple badges with consistent spacing and wrapping.

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

import { ReadmeBadgeRow } from "@/components/readme-badge-row"

<ReadmeBadgeRow>
<ReadmeBadge src="https://shieldcn.dev/npm/react.svg" alt="npm" />
<ReadmeBadge src="https://shieldcn.dev/github/stars/vercel/next.js.svg" alt="stars" />
<ReadmeBadge src="https://shieldcn.dev/badge/build-passing-green.svg" alt="build" />
</ReadmeBadgeRow>

BadgePreview

Visual badge preview with live rendering and optional copyable code snippet. Great for docs pages and badge builders.

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

import { BadgePreview } from "@/components/badge-preview"

Not a replacement for URLs

These components don't replace the badge service. They're convenience wrappers for rendering shieldcn badge URLs in React apps.

The core product is still the URL:

https://shieldcn.dev/npm/react.svg