BadgePreview
Visual badge preview with live rendering and copyable code snippet.
Installation
pnpm dlx shadcn@latest add @shieldcn/badge-previewUsage
import { BadgePreview } from "@/components/badge-preview"Basic preview
<BadgePreview src="https://shieldcn.dev/npm/react.svg" alt="React" />With code snippet
Shows a copyable code block below the badge preview.
With label
Dark and light modes
/npm/react.svg
/npm/react.svg?mode=light
Variant grid
Use BadgePreviewGroup and BadgePreviewCard to show multiple variants:
/npm/react.svg
/npm/react.svg?variant=branded
/npm/react.svg?variant=outline
/npm/react.svg?variant=ghost
API Reference
BadgePreview
PropType