A mobile app promo with a phone mockup, floating cards that drift, generic store badges, a scannable-looking QR pattern and a rating line.
See what is safe to spend before you tap your card. Tally sorts every purchase, warns you before a bill and keeps your goals on track.
npx shadcn@latest add https://hyperblur.dev/r/download-app-badges.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/download-app-badges.tsx.
import { DownloadAppBadges } from "@/components/hyperblur/download-app-badges"
<DownloadAppBadges appName="Tally" badges={[{ platform: "ios", caption: "Download for", label: "iPhone", href: "/ios" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| appName | string | "Tally" | App name. Its first letter appears on the notification icon. |
| eyebrow | string | "Tally 3.0 is here for phones" | Pill text next to the New tag. Empty string hides the pill. |
| title | string | "Your budget, finally in your pocket" | Section headline. |
| subtitle | string | sample text | Paragraph under the headline. Empty string hides it. |
| badges | { platform: "ios" | "android"; caption: string; label: string; href: string }[] | iPhone and Android badges | Download badges drawn with neutral glyphs, no store logos. |
| rating | number | 4.9 | Average rating shown next to the stars. |
| ratingCount | string | "38,200 ratings" | Text after the rating. |
| downloads | string | "1.2M downloads" | Extra stat after a divider. Empty string hides it. |
| qrLabel | string | "Scan to install" | Heading next to the QR pattern. |
| qrHint | string | sample text | Helper text under the QR heading. |
| qrValue | string | "https://tally.example/get" | Seeds the QR pattern and its accessible label. The pattern is decorative, swap in a real QR image for production. |
| onBadgeClick | (platform: "ios" | "android") => void | Called when a badge is clicked. | |
| accent | string | "#f5a524" | Color of the glow, rings, chart line and highlights. |
| className | string | Extra class names on the section root. | |
| style | CSSProperties | Inline styles on the section root, merged after the accent variable. |