shadcn.io is not affiliated with official shadcn/ui
Email Digest Blog Block for Ark UI
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 Ark 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.