shadcn.io is not affiliated with official shadcn/ui
Email Signature Onboarding Block for React Aria
A framed mail-app window with signature details at the end (name, title, company, phone, a tagline switch and a stacked or side-by-side layout) and a drawn draft message at the start whose signature updates as you type, with a copy button for plain text.
Installation
Overview
Let people write their email signature where it will be read, with this signature step for React with React Aria. It's one framed window in Sigilby, a team mail client: a top bar with the product's mark, the heading and Copy signature, over two panes. At the end are the details in Fields with Inputs (name, title, company, phone), a Switch that adds a tagline, and a Segment Group that chooses a Stacked or Side by side layout. At the start is a drawn compose window with a short message, and the signature under it is redrawn on every keystroke, with the initials tile for a logo. Copy signature, a Shine Button, is the only colored control and puts the signature on the real clipboard as plain text.
FAQ
What does Copy signature copy?
Plain text, one line each: the name, the title and company, the phone and, if the switch is on, the tagline. Both layouts copy the same lines, because plain text has no columns. If the browser refuses the clipboard, the status line says so; and with no name typed it asks for one and puts focus in the field.
What do Stacked and Side by side change?
Only the drawing. Stacked puts the initials tile above the lines; Side by side puts it at the start of the lines with a hairline between them. The choice is a Segment Group, so the arrow keys move between the two options on every library.
What does the tagline switch do?
It adds or removes the last line of the signature. The tagline's field stays in its place, so the window never changes height, and wakes up (editable) only while the switch is on. Its text is kept when you switch it off and back on.
Why are there initials and not a logo?
The tile is two typed letters, since the demo has no image to ship. In your app replace the tile with an image you host: a signature that is pasted into a mail client can only show an image the client can fetch from a public address, which is why this block copies text and not the drawing.
What stays local in the demo, and how do I wire it?
Everything but the clipboard. The recipient, the subject and the message are typed in the file, nothing is saved or sent, and Copy signature is the only thing that leaves the page. In your app store the details with the person's profile and offer a version with HTML as well as this plain-text one.