shieldcn
Docs
Studio
Showcase
Sponsor
jal-co/shieldcn607
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/shieldcn607

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

ReadmeBadgeRow

Horizontal layout wrapper for multiple badges with spacing and alignment.

Installation

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

Usage

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

Basic 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>

Alignment

/badge/left-aligned-blue.svg
/badge/centered-blue.svg
/badge/right-aligned-blue.svg

Gap sizes

/badge/gap-xs-green.svg?variant=outline
/badge/gap-sm-green.svg?variant=outline
/badge/gap-md-green.svg?variant=outline
/badge/gap-lg-green.svg?variant=outline

Works with any children

ReadmeBadgeRow works with any inline elements, not just ReadmeBadge:

<ReadmeBadgeRow>
<img src="https://shieldcn.dev/npm/react.svg" alt="React" />
<img src="https://shields.io/badge/foo-bar-blue" alt="shields" />
</ReadmeBadgeRow>

API Reference

ReadmeBadgeRow

PropType

On This Page

InstallationUsageBasic rowAlignmentGap sizesWorks with any childrenAPI Reference