A download section that detects the visitor's operating system and offers the matching installer with a build picker. The button fills while the download starts and then shows the install steps; other platforms sit below.
A quiet inbox for teams that answer customers all day. We picked the right installer for your computer; switch below if you need another.
npx shadcn@latest add https://hyperblur.dev/r/download-os-hub.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/download-os-hub.tsx.
import { DownloadOsHub } from "@/components/hyperblur/download-os-hub"
<DownloadOsHub onDownload={(d) => console.log(d.variant.file)} />| Prop | Type | Default | Description |
|---|---|---|---|
| appName | string | "Tern" | Product name in the footer line. |
| version | string | "4.2.1" | Version shown under the button. |
| title | string | "Get Tern for your desk" | Section heading. |
| subtitle | string | "A quiet inbox for teams..." | Supporting paragraph. |
| platform | "auto" | "macos" | "windows" | "linux" | "ios" | "android" | "auto" | Platform to feature. `auto` reads it from the browser after hydration. |
| platforms | { id: OsHubPlatformId; label: string; requirement: string; variants: { label: string; file: string; size: string; href: string }[]; steps: string[] }[] | macOS, Windows, Linux, iPhone, Android | Platforms with their builds and the steps shown after download. |
| releaseNotes | { label: string; href: string } | { label: "What is new in 4.2.1", href: "#" } | Link beside the version line. |
| accent | string | "#22d3ee" | Accent for the button, halo and selected build. |
| onDownload | (download: { platform: OsHubPlatformId; variant: OsHubVariant }) => void | Called when the download button is pressed. |