Registry

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:

Available components

ReadmeBadge

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

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

ReadmeBadgeRow

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

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

BadgePreview

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

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

That works everywhere — GitHub READMEs, npm pages, docs sites, forums, and anywhere else Markdown renders.