A light, magazine-style bento on paper with serif headlines, grainy gradient covers, a pull quote, a big numeral and a selectable tag cloud.
Folio is a calm home for newsletters, essays and print-ready issues. No feeds, no growth hacks, just beautiful pages and readers who stay.
Essays · 14 min read
We stopped chasing the feed and started sending letters. Open rates doubled, and readers began writing back.
independent studios publish their issues on Folio.
Tomás Reis · 9 min
npx shadcn@latest add https://hyperblur.dev/r/bento-editorial.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-editorial.tsx.
import { BentoEditorial } from "@/components/hyperblur/bento-editorial"
<BentoEditorial highlight="read to the end" onTagSelect={(tag, on) => console.log(tag, on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| masthead | string | "Folio · Volume 4 · Autumn 2026" | Small caps line above the double rule. |
| title | string | "Publishing for people who" | First part of the serif heading. |
| highlight | string | "read to the end" | Italic accent words that end the heading. |
| subtitle | string | "Folio is a calm home for newsletters..." | Paragraph beside the heading. |
| cover | { kicker: string; title: string; byline: string; href: string } | Issue 12 story | The tall cover story cell. |
| feature | { kicker: string; title: string; byline: string; href: string } | Field notes story | The wide feature story cell. |
| quote | string | "We stopped chasing the feed..." | Pull quote text. |
| quoteAuthor | string | "Imogen Hart" | Quote author. Also used for the initials avatar. |
| quoteRole | string | "Editor, Low Tide" | Author role under the name. |
| numeral | string | "418" | Big number in the dark cell. |
| numeralCaption | string | "independent studios publish..." | Caption under the big number. |
| tags | string[] | 10 themes | Tag cloud entries. Each one toggles on click. |
| onTagSelect | (tag: string, selected: boolean) => void | Called when a tag is toggled. | |
| accent | string | "#e4572e" | Accent for the italic words, quote mark and kickers. |
| paper | string | "#f7f5ef" | Background color of the section. |
| ink | string | "#1c1a17" | Text and rule color. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |