<StoreBadgeGroup>
<StoreBadge store="app-store" href="https://example.com/app-store" qr />
<StoreBadge store="google-play" href="https://example.com/google-play" qr />
</StoreBadgeGroup>

Download on theApp Store Get it onGoogle Play

Store Badge

tsx

import { StoreBadge, StoreBadgeGroup } from "@/components/myndui/store-badge";export function Download() {return (  <StoreBadgeGroup>    <StoreBadge store="app-store" href="https://example.com/app-store" />    <StoreBadge store="google-play" href="https://example.com/google-play" />  </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://myndui.design/r/store-badge.json"

Scan to download

Add the qr prop and the badge gains the pro "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 — no image, no setup.

Usage

tsx

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

tsx

<StoreBadge store="app-store" href="https://example.com/app-store" />
<StoreBadge store="google-play" theme="light" href="https://example.com/google-play" />

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

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

tsx

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

<QrCode value="https://example.com/app-store" size={180} logo={<Logo />} />;

Props

`StoreBadge`

Prop	Type	Default	Description
`store`	`"app-store" \| "google-play"`	—	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`	—	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`	—	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.