# App Download

> "Get the app" section: App Store and Google Play badges, a star rating and a real, scannable QR code (encoded in the file from a url prop) for desktop visitors, beside a phone showing a live app screen whose next task ticks itself off on view. Phones get full-width store buttons instead of the QR. Optional desktop builds highlight the visitor's own OS.

- Slug: `app-download`
- Category: [Calls to action](https://www.assembli.design/category/calls-to-action.md)
- Type: block
- Tags: app, download, mobile, qr-code, app-store, google-play, phone, mockup, cta
- npm dependencies: lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/app-download
- Page: https://www.assembli.design/components/app-download

![App Download preview](https://www.assembli.design/thumbnails/app-download-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `app` | `{ name: string; icon?: React.ReactNode; meta?: React.ReactNode }` | `{ name: "Daybook", meta: "Free on iPhone, iPad and Android"…` | The app's name, icon and a short line shown above the headline. |
| `title` | `React.ReactNode` | `"Your whole day, in your pocket"` |  |
| `description` | `React.ReactNode` | `"Plan the morning on your laptop, tick things off on the tr…` |  |
| `appStoreHref` | `string` | `"#"` | Pass an empty string to hide a store. |
| `playStoreHref` | `string` | `"#"` |  |
| `qrUrl` | `string` | `"https://daybook.app/get"` | Encoded in the QR code. A smart link that sends each phone to its own store works best. |
| `qrTitle` | `React.ReactNode` | `"Scan to get the app"` |  |
| `qrHint` | `React.ReactNode` | `"Point your phone’s camera at the code. It opens the right …` |  |
| `rating` | `{ value: number; count: string; label?: React.ReactNode } \| null` | `{ value: 4.9, count: "12k ratings" }` | `null` hides the rating line. |
| `desktop` | `AppDownloadDesktop[]` | `[ { platform: "macos", href: "#", detail: "Apple silicon & …` | Desktop builds. The visitor's own OS is highlighted once it's detected. |
| `screen` | `React.ReactNode` |  | What the phone shows. The phone wrapper is `group/phone` with `data-inview` once it scrolls into view. |
| `screenLabel` | `string` | `"The Daybook app showing today’s tasks"` | Accessible description of the phone screen. |
| `onStoreClick` | `(store: AppDownloadStore) => void` |  |  |
| `onDesktopClick` | `(platform: AppDownloadPlatform) => void` |  |  |
| `onCopyLink` | `(url: string) => void` |  |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/app-download/app-download.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/app-download
```

Registry item JSON: https://www.assembli.design/r/app-download.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.