An app footer with a promo card, generic platform download badges, a drawn QR code, a floating phone with a scrolling feed, link columns, a language select and a theme switch that recolors the footer.
npx shadcn@latest add https://hyperblur.dev/r/footer-app-download.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-app-download.tsx.
import { FooterAppDownload } from "@/components/hyperblur/footer-app-download"
<FooterAppDownload onThemeChange={(t) => console.log(t)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Your field notes, offline and in your pocket." | Promo heading. |
| subtitle | string | "Capture photos, checklists..." | Promo text. |
| brand | string | "Fieldnote" | Brand name in the first column. |
| rating | string | "4.8 from 12,400 reviews" | Text next to the stars. |
| badges | { platform: "ios" | "android" | "mac" | "windows"; top: string; label: string; href: string }[] | 4 badges | Download buttons. The first two are filled, the rest outlined. |
| columns | { title: string; links: { label: string; href: string }[] }[] | Product, Support, Company | Link columns. |
| languages | { code: string; label: string }[] | 6 languages | Options in the language select. |
| language | string | Controlled language code. | |
| defaultLanguage | string | "en" | Initial language when uncontrolled. |
| onLanguageChange | (code: string) => void | Called when a language is picked. | |
| theme | "dark" | "light" | Controlled theme. | |
| defaultTheme | "dark" | "light" | "dark" | Initial theme when uncontrolled. |
| onThemeChange | (theme: "dark" | "light") => void | Called when the theme switch changes. | |
| legal | string | "© 2026 Fieldnote Labs, Inc. All rights reserved." | Copyright line. |
| accent | string | "#f59e0b" | Color of the promo glow, stars, logo and the highlighted feed cards. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |