shadcn.io is not affiliated with official shadcn/ui
Newsletter Email Changelog Block for React
A centred header over a framed release email: From, To, Date and Subject as a list of facts, one featured release in large type, an Also this week list of three and a View the full changelog button.
Installation
Overview
A release email drawn as a block, for React with Base UI, written for Inkpost, a fictional email digest tool. A centred header carries the title and one sentence, and under it a framed message follows your theme: a tinted shell with + marks on its corners around a raised panel. The message opens with its headers as a list of facts (From, To, Date, and the Subject in heavier type), then the featured release in large type with its version, day and type tag, a rule, "Also this week" with three shorter releases and, at the foot, a View the full changelog button and the small print every digest carries. Everything is drawn in the page's own greys: no logo, no photo. The block has no state. On a phone the headers stack their labels above their values. The page's top rule comes from the Guides spine, so it lines up with its neighbours in a stack. It's built from Frame, Badge, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product changelogs and newsletter tools that want to show what readers receive. The email, the addresses and the releases are example data.
FAQ
How do I change the email?
Edit FEATURED for the large release and ALSO for the shorter ones, newest first; each has a version, a date as an ISO day, a kind, a title and a summary. The headers (From and To) are HEADERS, and the Date and Subject rows sit in the JSX beside them. Keep to one featured release and three shorter ones: more belongs behind the button.
Is this a real email template?
No. It is a picture of an email in HTML, for a page, not markup for a mail client: mail apps need table layouts and inline styles. Use it to show readers what the digest looks like; build the real message with your email tool.
Why do the addresses use example.com style domains?
The sender is releases@inkpost.example and the reader is you@company.com: addresses that cannot belong to anyone. Replace them with your own, and keep them in dir="ltr" so a right-to-left page does not scramble them.
Where do the links go?
Every title, Unsubscribe, the preferences link and View the full changelog are links with href="#": point them at your pages.
The button renders the link it's given with render, with nativeButton={false}.
How is the email read by a screen reader?
The message is an article with a label, its headers are a description list, the featured release and the list are headings and a real list, and the type tags say their word as well as showing an icon. The date is a time element with a machine-readable value.
How does it fit on a phone and in a right-to-left layout?
Below sm each header puts its label above its value, long addresses wrap instead of scrolling, and nothing scrolls sideways at 320 pixels. In a right-to-left layout the text mirrors and the arrow on the button turns, while versions and addresses stay left to right.
Related
- Pro
Subscribe Updates Changelog
Votes and sharingA changelog split with an email form at the start (a field that checks itself, an Every release or Weekly digest choice and a Shine Button) and the three latest releases at the end.
- Pro
RSS Feed Changelog
Votes and sharingA feed address in a read-only field with a Copy button, a choice of RSS 2.0, Atom or JSON Feed that swaps the address, and the latest four entries as rows.
- Pro
Announcement Banner Changelog
Spotlights and mediaA release announcement for a product-announcement tool: the latest release as the headline with three audience tabs that change its highlights and a Shine Button, and behind a split divider an Earlier list of the three releases before it.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
- Pro
Digest Chooser Newsletter Footer
Newsletter sign-upA newsletter footer for a developer digest: two link groups on one half of a split, and on the other a real sign-up that lets the visitor tick the digests they want, checks the address and confirms in place.
- Pro
Email Signup Multi-Action Banner
Choices and promptsAn early-access signup for a design studio: a labelled email field with the Shine Button inside it, a validation message, a polite success line and a ghost Remind me later.