# Download Page > An apps download page: OS-aware hero download, a drawn desktop app and phone, a platform picker with files, commands and checksums, and FAQ. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add download-page` - Docs: https://wingo-ui.com/templates/download-page ## Interaction The hero rises in once on mount. Its download button adapts to the visitor's device after hydration (macOS on the server, so the markup never mismatches): Download for macOS, Windows or Linux, Get Acme for iPhone or Android; the line under it shows the variant, version, size and release date, and the other formats (Intel, MSI, .rpm) download from inline links. Under it a drawn desktop app wears macOS traffic lights, Windows caption buttons or a GNOME header bar to match, with a phone, quick add and a notification around it. The platform picker is a tab row (arrow keys, Home and End; a swipeable rail on phones) that opens a panel per platform: download rows, Homebrew, winget, Snap or npm commands with copy buttons, requirements, a SHA-256 with copy, and a drawing (a DMG window, an installer, a terminal, a QR code, a browser extension). Download buttons spin, toast the file name and turn the panel into a thanks state with three drawn install steps, Try again and Back to downloads. The Beta channel switch in the panel and the Stable / Beta segmented control in the release notes share one state and change every version, file name, command and checksum on the page. Desktop features show their real shortcuts, the system requirements table becomes cards below 768px, and the FAQ opens one answer at a time. Reduced motion keeps everything still. ## Installation ```bash npx wingo-ui@latest add download-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/download-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/download-page.tsx` - `components/templates/download-page-data.ts` npm dependencies: `npm i lucide-react motion` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [App Download Section](https://wingo-ui.com/components/app-download-section) ([Markdown](https://wingo-ui.com/components/app-download-section.md)) - [FAQ Section](https://wingo-ui.com/components/faq-section) ([Markdown](https://wingo-ui.com/components/faq-section.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) - [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Copy Button](https://wingo-ui.com/components/copy-button) ([Markdown](https://wingo-ui.com/components/copy-button.md)) - [Kbd](https://wingo-ui.com/components/kbd) ([Markdown](https://wingo-ui.com/components/kbd.md)) - [QR Code](https://wingo-ui.com/components/qr-code) ([Markdown](https://wingo-ui.com/components/qr-code.md)) - [Segmented Control](https://wingo-ui.com/components/segmented-control) ([Markdown](https://wingo-ui.com/components/segmented-control.md)) - [Switch](https://wingo-ui.com/components/switch) ([Markdown](https://wingo-ui.com/components/switch.md)) - [Toast](https://wingo-ui.com/components/toast) ([Markdown](https://wingo-ui.com/components/toast.md)) - [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/download/page.tsx "use client" import Link from "next/link" import { DownloadPage } from "@/components/templates/download-page" const FILES: Record = { "mac:arm64": "https://downloads.acme.com/Acme-latest-arm64.dmg", "windows:exe": "https://downloads.acme.com/AcmeSetup-latest.exe", } export default function DownloadRoute() { return ( { const url = FILES[`${platform}:${variant}`] if (url) window.location.assign(url) }} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "bold" \| "minimal"` | `"classic"` | The whole page's look. classic follows the layout props; bold: a pill header, a giant start-aligned title on a gradient mesh with the download beside the description, rounder panels, a colored mobile card, FAQ cards, a scene band and a wordmark footer; minimal: a transparent header, no glow or floating cards, outlined flat panels, no gray bands and a simple footer. The *Props overrides still win. | | `platform?` | `"auto" \| "mac" \| "windows" \| "linux" \| "ios" \| "android" \| "extension" \| "cli"` | `"auto"` | The platform the hero button downloads and the picker opens on. auto detects the visitor's device after hydration and renders macOS on the server; a value pins it (and the drawn window's chrome). | | `channel?` | `"stable" \| "beta"` | | The release channel, controlled. Every version, file name, install command and checksum follows it. Leave it out to let the page own it. | | `defaultChannel?` | `"stable" \| "beta"` | `"stable"` | The channel while uncontrolled: beta shows the 3.3.0-beta.2 files, commands and notes from the first render. | | `onChannelChange?` | `(channel: DownloadChannel) => void` | | Runs when the Beta channel switch or the Stable / Beta control changes. | | `platforms?` | `DownloadPlatform[]` | `"DOWNLOAD_PLATFORMS"` | The picker: { id, name, short, icon?, kind, tagline, meta, variants, commands?, requirements, visual, lines?, qr?, steps } per platform. A variant is { id, label, detail?, file? ({version} filled in), size?, recommended?, store?, action?, href?, checksum? }. | | `releases?` | `Record` | `"DOWNLOAD_RELEASES"` | { stable, beta }: { version, date (yyyy-mm-dd), notes: { type, text }[] } per channel. | | `features?` | `DownloadFeature[]` | `"DOWNLOAD_FEATURES"` | Desktop features: { id, icon?, title, description, shortcut?, shortcutLabel?, visual? }; visual is quick-add, offline, notifications, menu-bar or any node. | | `requirements?` | `DownloadRequirement[]` | `"DOWNLOAD_REQUIREMENTS"` | { id, platform, icon?, os, processor, memory, disk } rows of the requirements table. | | `enterprise?` | `DownloadEnterprisePoint[]` | `"DOWNLOAD_ENTERPRISE_POINTS"` | { icon?, title, description } points of the IT deployment panel. | | `faq?` | `FaqItem[]` | `"DOWNLOAD_FAQ"` | { question, answer } pairs about installing. | | `labels?` | `Partial` | `"DEFAULT_DOWNLOAD_PAGE_LABELS"` | Every visible string; the ones with a name, file or version are functions. | | `hrefs?` | `Partial` | `"DEFAULT_DOWNLOAD_PAGE_HREFS"` | { changelog, sales, guide, web }: release notes, contact, the admin guide and the web app. | | `showAnnouncement?` | `boolean` | `true` | The strip above the header bar. | | `showPicker?` | `boolean` | `true` | The platform picker and its download panel. | | `showFeatures?` | `boolean` | `true` | The desktop features with their shortcuts. | | `showMobile?` | `boolean` | `true` | The mobile apps section (AppDownloadSection). | | `showReleaseNotes?` | `boolean` | `true` | The latest release notes and the release channel card. | | `showRequirements?` | `boolean` | `true` | The system requirements table (cards on phones). | | `showEnterprise?` | `boolean` | `true` | The IT deployment panel. | | `showFaq?` | `boolean` | `true` | The FAQ. | | `showCta?` | `boolean` | `true` | The closing call to action. | | `showPhone?` | `boolean` | `true` | The phone overlapping the drawn desktop app. Applies to the classic and minimal designs. | | `ctaVariant?` | `"inverted" \| "soft" \| "split"` | `"inverted"` | The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design. | | `alternate?` | `boolean` | `true` | Gray bands on every other visible section. Applies to the classic and bold designs. | | `phoneColor?` | `string` | `"#0A0A0A"` | The frame of the drawn phones. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Accents: the hero glow, the drawn apps and app icon, the selected platform, icon tiles, checks, steps and the channel controls. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The download buttons, Talk to sales, the header's Get started and the closing band; brand is the marketing orange. | | `header?` | `boolean` | `true` | The marketing header; off inside a site layout. | | `footer?` | `boolean` | `true` | The marketing footer with its newsletter form. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `mobileProps?` | `Partial` | | Overrides for the mobile AppDownloadSection (stores, layout, qrValue...). | | `faqProps?` | `Partial` | | Overrides for the FaqSection. | | `ctaProps?` | `Partial` | | Overrides for the CtaSection. | | `onDownload?` | `(platform: DownloadPlatformId, variant: string, channel: DownloadChannel) => (void \| Promise)` | | Every download and store button. A returned promise keeps the button loading and a rejection toasts downloadFailed; then the panel shows the install steps. Without it the button spins for 700 ms, toasts the file name and shows the steps. | | `onSubscribe?` | `(email: string) => (void \| Promise)` | | The footer newsletter; a rejected promise shows an error. | | `toastOptions?` | `ToastOptions \| false` | `"{}"` | Options for the download toasts ({ toasterId, duration... }); false sends none. A Toaster must be mounted to see them. | | `animateIn?` | `boolean` | `true` | The hero rises in once on mount; false keeps the page still (thumbnails). Reduced motion always does. | | `locale?` | `string` | `"en-US"` | Intl locale for the release dates. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for every link on the page (next/link in an app). | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, hero, title, download, shot, picker, tile, panel, thanks, features, feature, mobile, release, requirements, enterprise, faq, cta and footer. | ## Parts ### DOWNLOAD_PAGE_SAMPLE (constant) All the sample content in one object: platforms, releases, features, requirements, enterprise and faq. ### DOWNLOAD_PLATFORMS (constant) Seven platforms: macOS, Windows, Linux, iPhone and iPad, Android, the web extension and the CLI, with files, commands and install steps. ### DOWNLOAD_RELEASES (constant) The stable 3.2.1 and beta 3.3.0-beta.2 releases with their notes. ### DOWNLOAD_FEATURES (constant) Four desktop features: quick add, offline, native notifications and the menu bar widget. ### DOWNLOAD_REQUIREMENTS (constant) Requirement rows for macOS, Windows, Linux, iOS and Android. ### DOWNLOAD_ENTERPRISE_POINTS (constant) Packages, MDM, SSO and SCIM, and update rings. ### DOWNLOAD_FAQ (constant) Six questions about price, Apple silicon vs Intel, updates, the beta, offline use and checksums. ### DEFAULT_DOWNLOAD_PAGE_LABELS (constant) The English strings. ### DEFAULT_DOWNLOAD_PAGE_HREFS (constant) The default link targets. ### DOWNLOAD_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "bold", "minimal"]. ### DownloadPageProps (type) Props of DownloadPage. ### DownloadPageDesign (type) "classic" | "bold" | "minimal". ### DownloadPagePlatform (type) A platform id or "auto". ### DownloadPlatformId (type) "mac" | "windows" | "linux" | "ios" | "android" | "extension" | "cli". ### DownloadChannel (type) "stable" | "beta". ### DownloadPlatform (type) One platform of the picker. ### DownloadVariant (type) One file or store listing of a platform. ### DownloadRelease (type) A channel's version, date and notes. ### DownloadFeature (type) One desktop feature card. ### DownloadRequirement (type) One row of the requirements table. ### DownloadPageLabels (type) The strings labels can override. ### DownloadPageHrefs (type) The link targets hrefs can override. ## Examples - **Bold design**: design="bold": a giant start-aligned title on a gradient mesh, the download beside the description, a colored mobile card and a wordmark footer. - **Minimal design**: design="minimal": a transparent header, no glow or floating cards, outlined flat panels and no gray bands. - **Windows visitor on the beta**: platform="windows" and channel beta: Windows window chrome, Download for Windows, 3.3.0-beta.2 files and winget beta commands. - **Brand orange, Linux**: tone and ctaTone brand on a Linux visitor: an orange glow, GNOME window chrome, the .deb as the hero download and a split closing panel. - **Real downloads**: onDownload returns a promise: the button spins for 1.2 s, then the install steps show; every call toasts what a real app would fetch. ## See also - [App Download Section](https://wingo-ui.com/components/app-download-section) ([Markdown](https://wingo-ui.com/components/app-download-section.md)) - [Landing Page](https://wingo-ui.com/templates/landing-page) ([Markdown](https://wingo-ui.com/templates/landing-page.md)) - [Changelog Page](https://wingo-ui.com/templates/changelog-page) ([Markdown](https://wingo-ui.com/templates/changelog-page.md)) - [QR Code](https://wingo-ui.com/components/qr-code) ([Markdown](https://wingo-ui.com/components/qr-code.md)) - [Copy Button](https://wingo-ui.com/components/copy-button) ([Markdown](https://wingo-ui.com/components/copy-button.md)) --- Canonical: https://wingo-ui.com/templates/download-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt