shadcn.io is not affiliated with official shadcn/ui
Email Digest Blog Block for React
A morning briefing shown as the email it is: drawn mail chrome, four summaries and an unsubscribe line, with a Switch that turns them into monospaced plain text.
Installation
Overview
A daily-digest preview for React with Base UI, written for Dayfold, a morning briefing. A split puts the copy and a Switch at the start and a framed mail window at the end, behind a divider that meets the top rule at a + mark. The window has drawn mail chrome (a sender with an initials avatar, the date, a "View in browser" link and the subject), today's four summaries with their reading times, and an unsubscribe line. The Switch turns the same four summaries into monospaced plain text, as a mail app shows them with images off; both versions share one grid cell, so the window never changes height. On a phone the window sits under the copy. It's built from Switch, Avatar and Guides. For newsletters and digests that want to show the issue before the signup. The issue is example data and the links in it go nowhere.
FAQ
How do I change the issue?
Edit ITEMS and ISSUE at the top of the file. The rich version and the plain-text version are both built from ITEMS, so they always say the same thing, and the total minutes in the copy and in the greeting are summed from it.
What does the Switch do?
It flips the window's body between the rich layout and the plain-text one. Both are always in the page, stacked in one grid cell; the one not shown is invisible, inert and hidden from assistive technology, so only one is read and focusable at a time and the window keeps the height of the taller one.
Is the plain text a real plain-text email?
It is the same content laid out the way one is written: numbered items, a summary under each, a bare link, and a signature line with the unsubscribe address. It is a picture of the format, not a second template you send.
Related
- Pro
Segmented Bar Recap Blog
Post listsA product team's weekly recap as five numbered posts under one segmented bar whose segments are as long as each post's reading time; pointing at a row lights its segment.
- 1415161718Pro
Week Board Blog
Archives by dateA news digest's week as five columns, Monday to Friday, each with a huge day numeral and that day's posts or a quiet 'No post', in a snap scroller on phones.
- Pro
Inline Subscribe Newsletter Blog
Subscribe and alertsAn end-of-post newsletter sign-up: an email field with the Subscribe button inside it, a message slot that never moves, and a confirmation that replaces the form in the same space.
- 52515049Pro
Sortable Issue Archive Newsletter Blog
Archives by dateA newsletter's back issues as rows with large mono issue numbers, subject lines, dates and an open-rate bar, with a Select that sorts them by newest, best opened or oldest.
- Pro
Topic Switch Subscribe Blog
Subscribe and alertsTopic subscriptions as six Switch rows with a line and posts per month each, a live summary that counts the topics and posts, and a Save preferences button with an honest confirmation.
- Pro
Latest Posts Blog
Featured storyJust published: the newest post as a lead band in large type with a pulsing dot and a New mark, three earlier posts as rows with unread dots, and a Mark all as read button.