About this block

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.

When to use

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

• Email list
• Email reader

After

• Inbox sidebar

What you can display

One strong use is the reply compose window docked over a mail layout. Other compose configurations:

• New thread. Clear the To and Subject fields and show an empty body with a placeholder prompt.
• Inline reply. Embed the address and body fields directly beneath the email reader instead of docking.
• Expanded window. Widen the card to max-w-xl and add a richer toolbar row for a full-screen compose.

Tip: the Kbd shortcut hint beside Send teaches the power-user path without burying it in documentation.