shadcn.io is not affiliated with official shadcn/ui
Letters to the Editor Blog Block for React
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 Base UI, 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.
Related
- Pro
Margin Note Editorial Blog
Featured storyThree editor's picks as split rows: the post with a numeral tile at the start and, in a tinted margin cell at the end, the editor's note with a hanging quote mark and a marked reason.
- ““““Pro
Pull Quotes Blog
Article partsFour pull quotes from a science-writing blog in cells with line overshoot: a large drawn quotation mark, the key phrase marked by a highlighter, who said it and in which post, a Copy button and a Read in context link.
- Pro
Comment Thread Blog
Reader feedbackA blog comment thread on hairline rows: top-level comments with initials avatars and fixed dates, replies in a Collapsible, and a form with an empty-submit check that adds your comment to the thread.
- Pro
Q and A Interview Blog
Story formatsAn interview told in four question-and-answer bands: the host's question at the start, the guest's answer at the end, both speakers' initials avatars in the header, and one phrase marked with a highlighter.
- Pro
Author Frame Guest Post Blog
Article partsA guest post on an outdoors blog: a header with the one Pitch a guest post button, an article under a Guest post badge, and an About the author frame with a bio and three icon links that carry tooltips.
- Pro
Was This Useful Feedback Blog
Reader feedbackA Was this useful? widget: Yes and No toggles with rolling counts, a No that opens reason chips, a note and a Send button in a panel that never changes height, and recent reader notes with star ratings.