shadcn.io is not affiliated with official shadcn/ui
Light Email Capture CTA Block for React
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 Base UI. 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.
Related
- Pro
Centered Light Avatar Email Capture CTA
Forms and captureA newsletter call to action in a framed form panel where the topics are toggle chips, each with its author's avatar: pick at least one, add an email, and the confirmation lists what you chose.
- Pro
Email Capture Light Pill CTA
Forms and captureA centred call to action between solid rails, built around one fully round capsule that holds the email field and a Shine Button, framed by + marks, growing slightly while you type and settling into a confirmation in place.
- Pro
Centered Email Capture CTA
Forms and captureA call to action between solid rails that follows the page theme, in a card in card with a two-step email capture: an email field and a Shine Button, then a six-digit code that verifies on the sixth digit and turns into a confirmation in the same space.
- Pro
Light Email Capture Progress CTA
Urgency and limitsA light waitlist CTA as a split between solid rails: the headline, a sentence and the email form with the Shine Button at the start, and a capacity panel at the end whose bar gets a You pin and a count that rolls up by one when you join.
- Pro
Centered Email Capture Form Hero
Signup and waitlistA compact centered newsletter hero with the email field in a full-width band between two hairlines: a Shine Button subscribes, then a confirmation replaces the form, over a row of subscriber proof.
- Pro
Copy Link Share CTA
Forms and captureA band call to action for a referral programme that follows your theme: the pitch beside a read-only invite field with a Shine Button that copies it, real email and system share links, and a closing band counting invites.