shadcn.io is not affiliated with official shadcn/ui
Letters to the Editor Blog Block for React Aria
Letters to the editor on cells with line overshoot: a typographic letterhead, the reader words in a blockquote, a sign-off with a place, and an indented Editor replies on two letters, with a toggle that quiets the unanswered ones.
Installation
Overview
A readers' letters column for React with React Aria, written for Dearwick, a slow-travel magazine. A centred header holds an All letters or Answered toggle, then four letters sit as cells with line overshoot, two across from md and one on a phone. Each letter is a figure under a typographic letterhead (the column's name, a rule and "Dear editor,"): the reader's words in a blockquote and a sign-off such as "Ines, Lisbon" with an initials avatar and the date. Two letters carry an indented Editor replies. The toggle never hides a letter: it quiets the ones without a reply and says how many are answered, so the wall keeps its shape. It is built from Guides, Avatar and ToggleGroup. For magazines, newsletters and any publication that prints its readers.
FAQ
What does the toggle do?
It dims the letters that have no editor's reply: a solid tint and softer text, with the same text size and layout, so nothing moves. The status line below it says "2 of 4 letters have an editor's reply; the rest are quiet" and is announced politely. All letters turns the dimming off. One choice is always on.
Is the letterhead an image?
No. It is set in text and hidden from assistive technology: the column's name, a hairline rule and "Dear editor,". It follows your theme in light and dark.
How do I add or remove a reply?
Each letter in LETTERS has a reply string. Leave it empty and the letter has none; fill it and the indented Editor replies appears under the sign-off, and the count above is derived from the data, so nothing else needs editing.