shadcn.io is not affiliated with official shadcn/ui
Newsletter Cadence About Block for React Aria
A newsletter signup for an editorial letter, where a weekly or monthly choice rewrites a drawn sample issue beside the email field.
Installation
Overview
A cadence picker for React with React Aria, written for Margin Notes, a fictional editorial newsletter. The start column holds the heading, a radio group of two cadences (Weekly digest, Monthly letter), an email field and a Shine Button labelled Subscribe. Choosing a cadence rewrites the sample issue at the end: its kicker, its subject and three headlines, all from the same cadence data. An empty address, or one without an @ and a dot after it, stays in the field, shows the problem under it and moves focus there. A usable address replaces the field with a confirmation that names the address and the cadence that was chosen at that moment, and says the address stays in this browser and nothing was sent. "Use another address" brings the field back. The sample keeps following the picker after that. On a wide screen a divider splits the form and the issue; on a phone the issue sits under the form. The page's rails and top rule come from the Guides spine. It's built from RadioGroup, Field, Input, ShineButton, Button and Guides, with a CSS entrance and your theme's tokens for every colour. Subscribe is the only primary action. For a page that should show what the letter looks like before someone joins. The issues are example data.
FAQ
How do I change the cadences?
The cadences are CADENCES at the top of the file. Each has an id, a label, a kicker, a subject and three headlines. The radio and the sample issue both read that array, so editing a subject changes the picker and the drawing together. The first cadence starts selected.
What does Subscribe actually do?
It checks the address in the browser. Nothing is sent, and there is no delay and no loading state. A problem is written under the field and the field is focused. A usable address is kept in the confirmation only: the line says it stays in this browser and that nothing was sent. Changing the cadence afterwards updates the sample and leaves the confirmation on the cadence that was picked when Subscribe was pressed. "Use another address" clears it and focuses the field again.
How is it read by a screen reader?
The heading is the section's only h2. The two choices are a radio group labelled "Cadence". The email field's label is visually hidden and reads "Email address", and the problem or the privacy note is tied to the field. The confirmation is a status, and focus moves to it. The sample is a figure: a caption, and an h3 for the subject, then the three headlines as a list.
Why is the sample drawn as text?
So the issue can be read, selected and changed. It is not a picture of a letter. The kicker, the subject and the headlines are the same strings as the cadence you picked, inside a frame whose corner marks overshoot.
How does it fit on a phone, and right to left?
The form comes first and the sample sits under it, with a rule between them. From lg they share the row and a divider meets the top rule. The email field and Subscribe stack at 320 pixels. In a right-to-left layout the divider moves to the other side, and the address in the confirmation keeps its own order.