Download Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// app/(marketing)/download/page.tsx
"use client"

import Link from "next/link"
import { DownloadPage } from "@/components/templates/download-page"

const FILES: Record<string, string> = {
  "mac:arm64": "https://downloads.acme.com/Acme-latest-arm64.dmg",
  "windows:exe": "https://downloads.acme.com/AcmeSetup-latest.exe",
}

export default function DownloadRoute() {
  return (
    <DownloadPage
      linkComponent={Link}
      ctaTone="brand"
      onDownload={(platform, variant) => {
        const url = FILES[`${platform}:${variant}`]
        if (url) window.location.assign(url)
      }}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "bold" | "minimal"

  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.

• platformdefault "auto"
  "auto" | "mac" | "windows" | "linux" | "ios" | "android" | "extension" | "cli"

  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.

• defaultChanneldefault "stable"
  "stable" | "beta"

  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.

• platformsdefault "DOWNLOAD_PLATFORMS"
  DownloadPlatform[]

  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? }.

• releasesdefault "DOWNLOAD_RELEASES"
  Record<DownloadChannel, DownloadRelease>

  { stable, beta }: { version, date (yyyy-mm-dd), notes: { type, text }[] } per channel.

• featuresdefault "DOWNLOAD_FEATURES"
  DownloadFeature[]

  Desktop features: { id, icon?, title, description, shortcut?, shortcutLabel?, visual? }; visual is quick-add, offline, notifications, menu-bar or any node.

• requirementsdefault "DOWNLOAD_REQUIREMENTS"
  DownloadRequirement[]

  { id, platform, icon?, os, processor, memory, disk } rows of the requirements table.

• enterprisedefault "DOWNLOAD_ENTERPRISE_POINTS"
  DownloadEnterprisePoint[]

  { icon?, title, description } points of the IT deployment panel.

• faqdefault "DOWNLOAD_FAQ"
  FaqItem[]

  { question, answer } pairs about installing.

• labelsdefault "DEFAULT_DOWNLOAD_PAGE_LABELS"
  Partial<DownloadPageLabels>

  Every visible string; the ones with a name, file or version are functions.

• hrefsdefault "DEFAULT_DOWNLOAD_PAGE_HREFS"
  Partial<DownloadPageHrefs>

  { changelog, sales, guide, web }: release notes, contact, the admin guide and the web app.

• showAnnouncementdefault true
  boolean

  The strip above the header bar.

• showPickerdefault true
  boolean

  The platform picker and its download panel.

• showFeaturesdefault true
  boolean

  The desktop features with their shortcuts.

• showMobiledefault true
  boolean

  The mobile apps section (AppDownloadSection).

• showReleaseNotesdefault true
  boolean

  The latest release notes and the release channel card.

• showRequirementsdefault true
  boolean

  The system requirements table (cards on phones).

• showEnterprisedefault true
  boolean

  The IT deployment panel.

• showFaqdefault true
  boolean

  The FAQ.

• showCtadefault true
  boolean

  The closing call to action.

• showPhonedefault true
  boolean

  The phone overlapping the drawn desktop app. Applies to the classic and minimal designs.

• ctaVariantdefault "inverted"
  "inverted" | "soft" | "split"

  The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design.

• alternatedefault true
  boolean

  Gray bands on every other visible section. Applies to the classic and bold designs.

• phoneColordefault "#0A0A0A"
  string

  The frame of the drawn phones.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: the hero glow, the drawn apps and app icon, the selected platform, icon tiles, checks, steps and the channel controls.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The download buttons, Talk to sales, the header's Get started and the closing band; brand is the marketing orange.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer with its newsletter form.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• mobileProps
  Partial<AppDownloadSectionProps>

  Overrides for the mobile AppDownloadSection (stores, layout, qrValue...).

• faqProps
  Partial<FaqSectionProps>

  Overrides for the FaqSection.

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the CtaSection.

• onDownload
  (platform: DownloadPlatformId, variant: string, channel: DownloadChannel) => (void | Promise<unknown>)

  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<unknown>)

  The footer newsletter; a rejected promise shows an error.

• toastOptionsdefault "{}"
  ToastOptions | false

  Options for the download toasts ({ toasterId, duration... }); false sends none. A Toaster must be mounted to see them.

• animateIndefault true
  boolean

  The hero rises in once on mount; false keeps the page still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the release dates.

• linkComponentdefault "<a>"
  (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<Record<DownloadPageSlot, string>>

  Classes for header, hero, title, download, shot, picker, tile, panel, thanks, features, feature, mobile, release, requirements, enterprise, faq, cta and footer.

Parts