shadcn.io is not affiliated with official shadcn/ui
Inline Subscribe Newsletter Blog Block for Radix UI
An end-of-post newsletter sign-up: an email field with the Subscribe button inside it, a message slot that never moves, and a confirmation that replaces the form in the same space.
Installation
Overview
A newsletter sign-up for React with Radix UI, written for Simmerside Letters, a weekly home-cooking letter. A centred header sits over one raised panel (a card in a shell with + marks at its corners). Inside it is a labelled email field whose Shine Button "Subscribe" is the field's end addon (a phone puts the button under the field, still inside the group), a line for the message, and a row of reader initials with "Join 12,400 readers" under a hairline. It is a real form: an empty or malformed address is named in a slot that is always there, so the button never moves, and a good address replaces the form, in the same space, with a polite confirmation that takes focus. It is built from InputGroup, Field, Shine Button, Avatar and Guides. For the foot of a post that wants one next step. Nothing is sent: the confirmation says so, and the reader count is an example figure.
FAQ
How is the address checked?
On submit, with a plain pattern: something, an @, and a domain with a suffix. An empty field gets "Enter your email address to subscribe" and a malformed one gets a line with an example address; focus goes back to the field either way. The message has a slot that is always rendered, so showing it moves nothing. Browser validation is turned off (noValidate) so the message is yours, in the same voice as the rest.
Does it subscribe anyone?
No. Nothing leaves the page, and the confirmation says "Nothing is sent in this demo". To go live, send email to your list provider inside the submit handler, where the code sets the confirmed state, and word the confirmation to match what your provider does next (a double opt-in email, for instance).
Why is the button inside the field?
It reads as one control: type, press Subscribe. The button is the input group's end addon, so the field's ring and border wrap both. On a phone the group wraps and the button takes its own full-width row under the field, still inside the group, so it stays easy to hit.
What happens after Subscribe?
The form and the confirmation share one grid cell, so the panel keeps its height. The form turns invisible and inert, the confirmation turns into a polite status and takes focus, and "Use another address" brings the form back with the field focused.