shadcn.io is not affiliated with official shadcn/ui
Email Signup Multi-Action Banner Block for React
An early-access signup for a design studio: a labelled email field with the Shine Button inside it, a validation message, a polite success line and a ghost Remind me later.
Installation
Overview
A one-field signup for React with Base UI, small enough to sit between two sections. Falconloop's card sits between the page's solid rails with a mail icon, a heading and a sentence, then one email field whose Shine Button "Join" sits inside the field as its end addon, so the form is a single line. Under it, a helper line says what the email is used for and a ghost "Remind me later" folds the whole block away. Submit checks the address and on a wrong one shows a message under the field and puts focus back in it; on success the form is replaced, in the same space, by "You're on the list" with the address typed, as a polite status line that takes focus. It's built from Field, Input Group, Button and Guides with your theme's tokens for every colour. For waitlists, early access, release notes and any signup that should take one line of the page.
FAQ
Is it a real form?
Yes: a form with noValidate, a field named "Work email" with a real label (hidden visually, still read by screen readers), type="email", autoComplete="email" and required. Submitting runs the browser's own validity check; a wrong address shows "Enter an email like ada@studio.com." under the field, marks it invalid and returns focus to it, and typing clears the message.
Where does the email go?
Nowhere yet: there is no server in the block. Send email to your list provider in the submit handler before setJoined(true), and show the same confirmation once the request succeeds; on failure set the error message and keep the form. The confirmation never claims more than "We'll write to you", so it stays true whatever your provider does.
How does the success state avoid shifting the page?
The form and the confirmation share one grid cell, so the card keeps the taller one's height. After submit the form turns invisible and inert and the confirmation becomes visible and takes focus, so screen readers read it and Tab carries on after it. With reduced motion nothing animates.
What does Remind me later do?
It folds the block away with a CSS height transition and moves focus to a visually hidden line, "We'll ask again next time you visit." Make that true on your side by setting a short-lived cookie in the handler and having the server render the card only when it is missing. Nothing is stored by the block itself.
Related
- 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
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
Dropdown Multi-Action Banner
Choices and promptsA region prompt for a data platform: a Select of four regions with their latency beside a Shine Button Continue and a ghost Skip, with a line that says why Continue waits.
- Pro
Feedback Prompt Multi-Action Banner
Choices and promptsA thumbs vote for a feature-flag tool that opens an optional comment box in place, with a Shine Button Send feedback, a ghost Skip and a thank-you line that replaces the vote.
- Pro
New Feature Top Bar Banner
Top barsA top bar for a collaborative editor with an outline New chip, one line of news and a See it button that opens a popover preview of the feature, with a close at the end.
- Pro
Trial Upgrade Multi-Action Banner
Choices and promptsA trial prompt card for a video editor that sets what you have now beside what stays after the trial, in two columns, with upgrade, compare and remind-me-later actions.