A paper-toned front page with a bold masthead, section nav, column rules that draw down on load and duotone covers that bloom into full color on hover. Includes a numbered most-read list, a pull quote and a briefs strip.
Eighteen companies tried it in 2025. Fourteen kept it. We spent a month inside three of them to find out what changed, and what nobody tells you before you start.
By Amara Osei · 16 min read
npx shadcn@latest add https://hyperblur.dev/r/blog-magazine-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/blog-magazine-grid.tsx.
import { BlogMagazineGrid } from "@/components/hyperblur/blog-magazine-grid"
<BlogMagazineGrid masthead="The Margin" accent="#e0391b" />| Prop | Type | Default | Description |
|---|---|---|---|
| masthead | string | "The Margin" | Publication name. The last word takes the accent color. |
| issue | string | "Issue 214" | Left masthead label. |
| dateline | string | "Saturday, November 7, 2026" | Right masthead label. |
| sections | string[] | 8 sections | Links in the section nav. |
| lead | { kicker: string; title: string; dek?: string; author: string; minutes: number; hue: number; href: string } | cover story | The large lead story. |
| stories | MagazineStory[] | 2 stories | Secondary stories in the middle column. |
| mostRead | { label: string; title: string; href: string }[] | 5 items | Numbered most-read list. |
| quote | { text: string; by: string; role: string } | a pull quote | Dark pull quote under the most-read list. |
| briefs | { label: string; title: string; href: string }[] | 4 briefs | Short items in the bottom strip. |
| accent | string | "#e0391b" | Accent for kickers, masthead word and nav underline. |
| onStoryClick | (title: string) => void | Called when any story link is clicked. |