shadcn.io is not affiliated with official shadcn/ui
Email Request Reviews Block for Radix UI
A review request email for a tea club: a subject Input, a send-delay Select and a greeting ToggleGroup beside a framed drawing of the email that follows every choice.
Installation
Overview
A review request email for React with Radix UI, for Dovecotemoor, a fictional tea club. A divider splits the section. At the start sit a compact header and a form: the subject line (an Input, 70 characters at most), when the request goes out (a Select: 3, 7 or 14 days after delivery) and the greeting (a ToggleGroup: Hi, Hello or Dear). At the end, the email is drawn in a frame with + marks: sender, recipient and subject, the greeting, a line about the order, a row of five stars that stand for the links in the real email, and a footer that says every customer is asked, whatever they think. The drawing follows each change at once, and the date it goes out is counted from a typed delivery date, so a seven-day wait after a delivery on 6 Oct reads 13 Oct. Nothing is sent: the stars are a drawing, not links, and the page says so. On a phone the email sits under the form. It's built from Input, Select, ToggleGroup, Field, Guides and CSS transitions only.
FAQ
Does this send an email?
No. There is no send button and no request: the controls change what the drawing shows and the date it says the email would go out on, and the page states "Nothing is sent in this demo". To send for real, pass the same three values (subject, delay in days, greeting word) to your own job queue or email service, and keep the drawing as the template preview.
How is the send date worked out?
From a typed delivery date, DELIVERED, plus the chosen number of days, using UTC date arithmetic, so it's the same on every server and never reads the visitor's clock. Change the constant, or compute it per order, and the caption, the paragraph and the drawing all update. Dates show without a year, and each has a time element with the machine-readable date.
What do the five stars in the email do?
In the real email each would be a link that opens your review form with that rating chosen, which is why the drawing says "Each star is a link". Here they're a drawing: hidden from screen readers, with the same sentence in text beside them. The footer asks every customer, never only the ones who seem pleased, and the copy never ties anything to the rating given.
How do the three controls work?
Typing in the subject updates the email on every key; an empty subject shows "(No subject)". Choosing a delay or a greeting changes the drawing and is announced once through a polite status line ("The request now goes out on 20 Oct."), not on every keystroke. The greeting group always keeps one choice.
The Select is controlled with value and onValueChange; the ToggleGroup is type="single" and ignores the empty string a second press would give.