Block
Source and install need .
pnpm dlx shadcn@latest add @assembli/app-downloadApp 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.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
app
{ name: string; icon?: React.ReactNode; meta?: React.ReactNode }
Default
{ 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
Default
"Your whole day, in your pocket"description
React.ReactNode
Default
"Plan the morning on your laptop, tick things off on the tr…appStoreHref
string
Default
"#"Pass an empty string to hide a store.
playStoreHref
string
Default
"#"qrUrl
string
Default
"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
Default
"Scan to get the app"qrHint
React.ReactNode
Default
"Point your phone’s camera at the code. It opens the right …rating
{ value: number; count: string; label?: React.ReactNode } | null
Default
{ value: 4.9, count: "12k ratings" }nullhides the rating line.desktop
AppDownloadDesktop[]
Default
[ { 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/phonewithdata-inviewonce it scrolls into view.screenLabel
string
Default
"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
| 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 | – |
