shadcn.io is not affiliated with official shadcn/ui
Newsletter Email Changelog Block for Solid
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 Solid with Ark 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's asChild receives its props: spread them onto your router's link.
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.