shadcn.io is not affiliated with official shadcn/ui
Subscribe Updates Changelog Block for React
A 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.
Installation
Overview
A subscribe-to-releases changelog for React with Base UI, written for Tidingwell, a fictional product-update tool. A split with a solid divider that runs from the page's top rule, with a + where it meets the halves. At the start sit the title, one sentence and the form: an email field, a two-way choice of how often (Every release or Weekly digest) and a Shine Button, the block's one primary action. At the end, "Recent changes" lists the three latest releases, each with a type tag (an icon and a word), version, day, linked title and sentence, then a View all releases link. Submitting checks the address: an empty or malformed one says what is wrong in a line that is always there, so the button never moves, and keeps focus in the field. A valid one clears the field and a polite status says what would happen next. Nothing is sent in this demo. On a phone the form comes first and a rule separates the halves. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Field, Input, Toggle Group, Shine Button, Badge, Button and Guides, with your theme's tokens for every colour. For product changelogs and release hubs that want a sign-up beside the latest work. The releases are example data.
FAQ
Where does the address go?
Nowhere: this is a demo, and the confirmation says so. In submit, after the checks, there is a comment where you send email and frequency to your mailing-list provider or your own endpoint. Keep the sentence about the demo only while that is true. The field is cleared after a valid submit; the confirmation repeats the address so the reader can see what was typed.
How is the address checked?
On submit only, with a small shape check (problemWith): something, an at sign, something, a dot, something. An empty field and a malformed one have different messages. The message sits in a line under the field that is always rendered, with a hint in it until there is an error, so the layout never shifts and the button doesn't move between press and release. Typing clears the message. A real address can still bounce: confirm it by email, as any sign-up should.
What do Every release and Weekly digest change?
They are two options of a single-choice group that is never empty: one is always pressed, and a pressed option is the text colour on the page colour. The choice only changes the confirmation's wording here. Edit FREQUENCIES to add a third, such as a monthly summary; each has an id, a label and a short phrase (gist) used in the confirmation.
How does it work with a keyboard and a screen reader?
Tab goes to the email field, the choice group, the Subscribe button and then the links. The arrow keys move between the two options. After a failed submit focus returns to the field and the error is tied to it with aria-describedby; the confirmation is a status region that is present from load, empty, and filled after a valid submit, so it is read once.
Where do the links go?
Each title and View all releases are links with href="#": point them at the release pages and your full changelog.
The button renders the link it's given with render, with nativeButton={false}.
How does it fit on a phone and in a right-to-left layout?
Below lg the halves stack with the form first, a rule between them, and the Subscribe button takes the full width. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the divider, the arrow on View all releases and the rows mirror, while the version numbers stay left to right.
Related
- Pro
Newsletter Email Changelog
Spotlights and mediaA 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.
- 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
Notification Bell Changelog
Votes and sharingA release feed with a bell: an unread count in a chip, the latest three releases as rows with unread markers, and a popover that marks them read and holds Email and Push switches.
- 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
Minimal Newsletter Footer
Newsletter sign-upA slim newsletter footer for a weekly letter: one centred title and line, a single email field with the Shine Button inside its box, and a legal band, with a real check and a confirmation 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.