ReadmeBadgeRow
Horizontal layout wrapper for multiple badges with spacing and alignment.
Installation
pnpm dlx shadcn@latest add @shieldcn/readme-badge-rowUsage
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