<StoreBadgeGroup>
<StoreBadge store="app-store" href="https://apps.apple.com/app/id6761287549" qr />
<StoreBadge store="google-play" href="https://play.google.com/store/apps/details?id=lol.hivemind" qr />
</StoreBadgeGroup>

Download on theApp Store Get it onGoogle Play

Store Badge

tsx

import { StoreBadge, StoreBadgeGroup } from "@/components/godui/store-badge";export function Download() {return (  <StoreBadgeGroup>    <StoreBadge store="app-store" href="https://apps.apple.com/app/id6761287549" />    <StoreBadge store="google-play" href="https://play.google.com/store/apps/details?id=lol.hivemind" />  </StoreBadgeGroup>);}

Documentation

Learn Playground

The download CTA that sits under every app hero. Drop in an App Store or Google Play badge, or use the group for the classic dual-badge row. Badges are inline SVG, scale with a single height prop, carry the official hairline border, and sweep a subtle sheen on hover.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/lab/store-badge.json"

Scan to download

Add the qr prop and the badge gains "scan to download" behaviour: on a desktop (fine pointer), hovering or focusing the badge reveals a QR popover that encodes the badge's href (or qrUrl), so a laptop visitor can install on their phone. On touch, the popover is skipped and the badge links normally. The QR is generated on the client from the URL, with no image or setup.

Usage

tsx

import { StoreBadge, StoreBadgeGroup } from "@/components/godui/store-badge";

tsx

<StoreBadge store="app-store" href="https://apps.apple.com/app/id6761287549" />
<StoreBadge store="google-play" theme="light" href="https://play.google.com/store/apps/details?id=lol.hivemind" />

// With the scan-to-download QR popover:
<StoreBadge store="app-store" href="https://apps.apple.com/app/id6761287549" qr />

The QrCode primitive is exported too, for any link, with theming and an optional center logo:

tsx

import { QrCode } from "@/components/godui/store-badge";

<QrCode value="https://apps.apple.com/app/id6761287549" size={180} logo={<Logo />} />;

Props

`StoreBadge`

Prop	Type	Default	Description
`store`	`"app-store" \| "google-play"`	none	Which store the badge links to.
`theme`	`"dark" \| "light"`	`"dark"`	Dark (black) or light (white) finish.
`height`	`number`	`52`	Badge height in px; type scales with it.
`href`	`string`	none	Destination URL (forwarded to `<a>`).
`qr`	`boolean`	`false`	Reveal a scan-to-download QR popover on hover.
`qrUrl`	`string`	`href`	Override what the QR encodes.
`qrLabel`	`string`	`"Scan to download"`	Heading in the QR popover.
`qrCaption`	`string`	`"Point your phone…"`	Small line under the QR.
`qrSize`	`number`	`148`	QR render size in px.
`qrLogo`	`React.ReactNode`	none	Node knocked out in the QR center.

StoreBadge forwards every standard <a> attribute. StoreBadgeGroup is a flex row wrapper for the dual-badge CTA and forwards <div> attributes.