shadcn.io is not affiliated with official shadcn/ui
Light Email Capture CTA Block for React Aria
A newsletter CTA as a band between solid rails: a headline and a sentence at the start, and at the end one Shine Button that opens in place into an email field with its own Shine submit, closes on Escape and ends in a confirmation.
Installation
Overview
A newsletter call to action that is one button until it is wanted, for React with React Aria. The column itself is the band: a headline and a sentence with a bold lead ("One short email every two weeks") at the start, and at the end a Shine Button, "Subscribe by email", with a one-line promise under it. Pressing it opens the button in place into an email field with its own Shine "Subscribe" button; focus moves into the field, Escape or leaving the control closes it again, a bad address shows a message under the field and keeps it open, and a good one swaps the control for a confirmation with the address and a way to use another. The three states share one cell, so the band never changes height. On a phone the text comes first and the control runs the full width under it. It's built from Shine Button, Field, Input Group, Button and Guides, with Lucide icons, Tailwind CSS and CSS transitions that stay still under reduced motion. Made for changelog pages, newsletter footers and documentation indexes, where an always-open form would be too loud.
FAQ
How does the button open into a field?
The block holds a step, closed, open or done, and renders the three states in one grid cell. Opening fades the button out and the form in, and the states that aren't showing are made inert and invisible, so only one of them can be reached at a time. The field's name is "Email address". Because the states fill the same cell, the control keeps one width and height whichever is showing.
How does the keyboard work?
Pressing the button with Space or Enter opens it and moves focus into the field. Enter in the field, or the "Subscribe" button, submits; Escape closes the field and returns focus to the button; moving focus out of the whole control closes it too. A failed submit keeps the field open and focused.
How is the address checked, and where does the error show?
subscribe tests the typed address with the ADDRESS pattern at the top of the file. A bad address sets error, which appears under the field and is tied to it for screen readers; typing in the field or closing the control clears it.
How do I connect it to my email provider?
subscribe receives the form's submit. Replace the step change with a request to your provider, keep the control as it is while the request runs, and move to done when it succeeds. On a failure, put the provider's message in error. "Use another address" empties the field and opens it again.
What does the confirmation do for screen readers?
When the address is accepted, the form is hidden and made inert, and focus moves to the confirmation, so its heading, "You are subscribed", and the address are read from the start, and keyboard users continue from there instead of from the top of the page.