A newsletter archive section: numbered issues with date, topics and reading time that reveal an excerpt on hover, beside a subscribe card with a rotating border and email validation.
Short, opinionated and free. Written by the team at Fieldwork for people who make software.
npx shadcn@latest add https://hyperblur.dev/r/blog-newsletter-issues.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blog-newsletter-issues.tsx.
import { BlogNewsletterIssues } from "@/components/hyperblur/blog-newsletter-issues"
<BlogNewsletterIssues onSubscribe={async (email) => console.log(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "The Sunday Diff" | Newsletter name in the masthead. |
| title | string | "One sharp essay on product and design, every Sunday" | Section heading. |
| subtitle | string | "Short, opinionated and free..." | Supporting text. |
| issues | { number: number; title: string; excerpt: string; date: string; readTime: string; href: string; topics?: string[] }[] | 4 sample issues | Issues in the list. The first one shows its excerpt by default. |
| subscribers | string | "38,400" | Reader count in the subscribe card. |
| cadence | string | "Sundays, 7am" | Delivery schedule in the subscribe card. |
| placeholder | string | "you@company.com" | Email field placeholder. |
| buttonLabel | string | "Subscribe" | Submit button label. |
| successMessage | string | "You are in. Issue 149 lands on Sunday." | Shown after a successful subscribe. |
| archive | { label: string; href: string } | { label: "Browse all 148 issues", href: "#" } | Link under the list. |
| accent | string | "#10b981" | Accent for the logo, focus ring and rotating border. |
| onSubscribe | (email: string) => void | Promise<void> | Called with a valid email. Throw or reject to show the error state. |