Compose Blueprint
Static blueprint of a bottom-right docked compose window with To, Cc, and Subject fields, a body area, formatting affordances, and a Send button with a keyboard shortcut hint.
Static blueprint of a bottom-right docked compose window with To, Cc, and Subject fields, a body area, formatting affordances, and a Send button with a keyboard shortcut hint.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Compose Blueprint is a static rendering of the docked new-message window, positioned bottom-right over a faint page-chrome strip showing Avery Stone logged in at avery@acme.com. The card has a title bar with minimize and discard controls, three address fields (To, Cc, Subject) divided by ruled lines, a body area showing an in-progress reply to Priya about the Q2 roadmap, a blinking cursor indicator, and a formatting row with Type, Smile, and Paperclip affordances. Send sits at the right of the action bar beside a Ctrl and Enter keyboard shortcut hint rendered with Kbd.
This is a blueprint block: the compose card is absolute positioned markup, never a Radix Dialog, so the preview root captures it correctly. The draft is a single const object; the body uses whitespace-pre-line so line breaks in the string render without extra markup.
Reach for this block to communicate the compose window pattern to designers and engineers, or as a starting point for a real compose implementation wired to your draft save and send endpoints. Swap the static Input values for controlled state and attach your keyboard shortcut handler to the Send button.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the reply compose window docked over a mail layout. Other compose configurations:
Tip: the Kbd shortcut hint beside Send teaches the power-user path without burying it in documentation.