shadcn.io is not affiliated with official shadcn/ui
Email Signup Multi-Action Banner Block for Vue
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 Vue with Ark 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.