A paper toned footer led by a large newsletter signup with a light beam circling the email field, followed by a five column sitemap and a status bar.
npx shadcn@latest add https://hyperblur.dev/r/footer-newsletter-first.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-newsletter-first.tsx.
import { FooterNewsletterFirst } from "@/components/hyperblur/footer-newsletter-first"
<FooterNewsletterFirst onSubscribe={(email) => console.log(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "The Friday brief" | Label next to the issue number. |
| title | string | "One good email, every Friday." | Large heading. Text after the first comma is set in italic accent. |
| subtitle | string | "Product changes, field notes..." | Supporting text. |
| placeholder | string | "you@company.com" | Email field placeholder. |
| buttonLabel | string | "Subscribe" | Submit button label. |
| proof | string | "Read by 38,412 operators" | Social proof under the field. |
| brand | string | "Fieldnote" | Brand name in the bottom bar. |
| columns | { title: string; links: { label: string; href: string }[] }[] | 5 columns | Sitemap columns. |
| legal | string | "© 2026 Fieldnote Labs, Inc." | Copyright line. |
| onSubscribe | (email: string) => void | Promise<unknown> | Called with a valid email. A returned promise holds the loading state; a rejection shows the error state. Nothing is posted. | |
| accent | string | "#1f8a5b" | Color of the beam, the italic title words, links on hover and the success badge. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |